Question

单击编辑图标时，我希望文本可编辑。 div已经可以拖延了。它必须使用javascript完成。任何人都可以帮助我吗？

HTML代码

<ul class="drag-list">
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Not a fit</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Lack of knowledge</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Hired elsewhere</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
 </ul>

CSS代码

.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}

.drag-area i {text-align：center;宽度：100％;填充顶：9px;字体大小：16px的;颜色：#CCC;}

Answer 1

contenteditable="true"可以解决问题，单击要编辑的文本

＆＃13;

.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}

＆＃13;

<ul class="drag-list">
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title" contenteditable="true">Not a fit</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title" contenteditable="true">Lack of knowledge</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title" contenteditable="true">Hired elsewhere</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
 </ul>

＆＃13;

Answer 2

＆＃13;

$('.fa-pencil').click(function() {
console.log();
  $(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', true)
});

＆＃13;

.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drag-list">
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Not a fit</span>
    <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
    <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Lack of knowledge</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Hired elsewhere</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
 </ul>

＆＃13;

请参阅代码段。当你点击铅笔图标时，你可以编辑div的内容。点击铅笔会将attr contentEditable设置为true。

＆＃13;

$('.fa-pencil').click(function() {
  if($(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable') === "true"){
    $(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', false);
  } else {
     $(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', true);
     $(this.parentNode.previousElementSibling.previousElementSibling).focus();
  }
});

＆＃13;

.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drag-list">
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Not a fit</span>
    <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
    <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Lack of knowledge</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span class="title">Hired elsewhere</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right"><i class="fa fa-pencil"></i></a>
   </li>
 </ul>

＆＃13;

请参阅更新的代码段，再次点击铅笔图标后，您的更改将会保存。

Answer 3

   <li>
    <span class="drag-area"><i class="fa fa-bars"></i></span>
    <span id="title1" class="title">Not a fit</span>
      <a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
      <a class="pull-right" onclick='document.getElementById("title1").setAttribute("contenteditable", "true");'><i class="fa fa-pencil"></i></a>
   </li>

如何使用javascript动态更改文本

3 个答案: