Question

我正在使用vanilla 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);
   }

请不要jquery！谢谢！

Answer 1

你可以使用html的contenteditabe属性，并在点击时将属性添加到所需的元素：

＆＃13;

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;
      }
      
    }
  
  });

＆＃13;

li {
  border: 1px solid #ccc;
}

＆＃13;

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

＆＃13;

双击文本后如何使li元素可编辑（在vanilla javascript中）？

1 个答案: