如何点击<li>进行编辑？</li>

Question

我有一个看起来像这样的菜单：

我希望当用户点击+时，它所在的<li>元素变得像一个可编辑的输入表单，可以创建并保存新的菜单项名称（输入名称并单击Enter）。

当前项目的代码是

<li id="addNewContext" class="menu-item-divided"><a href="javascript:">+</a></li>

我是否可以使用一段代码来使该字段可编辑，以便将输入的名称保存到数组中，然后我可以使用该代码重新填充菜单？

谢谢！

Answer 1

HTML5允许将ContentEditable属性添加到任何HTML元素。为列表项的onclick事件分配一个函数，并使其将ContentEditable属性设置为true。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

＆＃13;

＆＃13;

var list = document.querySelector('ul');
var editList = document.querySelector('.edit-list');

editList.onclick = function() {
  
  //or you can use list.setAttribute("contentEditable", true);
  list.contentEditable = true;

}

＆＃13;

<ul>
  <li>list item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li><span class="edit-list">+</span>
  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;

JSFiddle：http://jsfiddle.net/b8m35wwk/1/

Answer 2

  

我希望当用户点击+ <li>元素时，它所在的内容变得像一个可编辑的输入表单，可以创建并保存新的菜单项名称（输入名称并单击Enter）。

此示例还会在点击时删除+符号：

＆＃13;

＆＃13;

$('#addNewContext')

// on click, make content editable.
.click(function() {
    $(this).html("").attr('contenteditable', 'true');
})

// on hit enter, 
.keyup(function(e) {
  if (e.keyCode == 13) {
     var val = $(this).text();
     $(this)
        // create a new li item
        .before("<li>" + val + "</li>")
        // set plus sign again
        .html("+")
        // make contenteditable to false, when clicked the process start again.
        .attr('contenteditable', 'false');
     e.preventDefault();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>not edit me</li>
  <li>not edit me</li>
  <li>not edit me</li>
  <li>not edit me</li>
  <li id="addNewContext" class="menu-item-divided">+</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用contentEditable

let list_1_e = document.getElementById('addNewContext');
list_1_e.contentEditable = true;