如何使 <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

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;

}

<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>

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