如何在点击时使可编辑?

I have a menu that looks like this:

我的菜单是这样的:

I want to make it possible that when the user clicks on + the <li> element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).

我希望使之成为可能，当用户单击+其位于其中的

元素时，它就像一个可编辑的输入表单，可以在其中创建和保存新的菜单项名称(通过输入名称并单击Enter)。

元素时,它就像一个可编辑的输入表单,可以在其中创建和保存新的菜单项名称(通过输入名称并单击进入)。

The code of the current item is

当前项的代码是

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

Is there a snippet of code I could use to make that field editable that could save the name entered into an array, which I can then use to repopulate the menu?

是否有一段代码可以用于使该字段可编辑，从而将名称保存到数组中，然后我可以使用它来重新填充菜单?

Thanks!

谢谢!

2 个解决方案

#1

HTML5 allows for a ContentEditable attribute to be added to any HTML element. Assign a function to the onclick event for the list item, and make it set the ContentEditable attribute to true.

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

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

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 as well: http://jsfiddle.net/b8m35wwk/1/

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

#2

I want to make it possible that when the user clicks on + the <li> element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).

我希望使之成为可能，当用户单击+其位于其中的

元素时，它就像一个可编辑的输入表单，可以在其中创建和保存新的菜单项名称(通过输入名称并单击Enter)。

元素时,它就像一个可编辑的输入表单,可以在其中创建和保存新的菜单项名称(通过输入名称并单击进入)。

This sample also remove + sign on click:

此示例还删除了单击时的+签名:

$('#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();
  }
});

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