如何在双击文本（香草javascript）后编辑一个li元素？

我在香草javascript中创建待办事项列表项目，并试图弄清楚如何在双击鼠标事件中编辑列表中的li项目。我希望在双击文本框后按下回车键后可以在文本框中显示原始文本，并使用新文本进行更新。如何在双击文本（香草javascript）后编辑一个li元素？

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

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

来源

2017-10-14 Katrina Ross

可以使用contenteditabe财产的HTML，并添加上单击属性所需的元素：

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>

来源

2017-10-14 09:12:18 JosephC

谢谢您的回答！有没有办法做到这一点，所以当你按下回车键，它会保存新的文本？现在，如果我按Enter键，它会创建一个新行。 –

@KatrinaRoss已更新代码 – JosephC

谢谢！我会尝试一下。 –

如何在双击文本（香草javascript）后编辑一个li元素？

回答

相关问题