如何在双击文本后使li元素可编辑(在原版Javascript中)

Question

我正在用普通的Javascript创建一个待办事项列表项目，并一直在尝试弄清楚如何在双击鼠标事件中编辑列表中的li项。我希望能够在双击后将原始文本放在文本框中，并在单击文本框或按 Enter 后使用新文本进行更新。

这是我试图写的东西。请让我知道我做错了什么，或者是否有更好的解决问题的方法。

editInput function() {
var todosUl = document.querySelector('ul');
todosUl.addEventListener('dblclick', function(event) {
   if (event.target.childNodes[0]) {
     var originalInput = event.target.childNodes[0];
     var editingInput = document.createElement("input");
     editingInput.type = 'text';
     parent = editingInput.parentNode;
     parent.replaceChild(originalInput, editingInput);
   }

请不要j查询！

Answer 1

您可以使用 HTML 的 contenteditabe 属性，并在单击时将该属性添加到所需的元素：

Object.prototype.insertAfter = function (newNode) { 
  this.parentNode.insertBefore(newNode, this.nextSibling);
};
document.addEventListener('keypress', function(e) {
    if(e.currentTarget.activeElement.className === 'content'){
      if ((e.keyCode || e.which) == 13) {
        var li = document.createElement('li');
        var ce = document.createAttribute('contenteditable');
        ce.value = "true";
        var cl = document.createAttribute('class');
        cl.value='content';
        li.setAttributeNode(ce);
        li.setAttributeNode(cl);
        e.currentTarget.activeElement.insertAfter(li);
        li.focus();
        return false;
      }else{
        return true;
      }
      
    }
  
  });

li {
  border: 1px solid #ccc;
}

<ul>
<li contenteditable="true" class="content">
</li>