如何在雙擊文本（香草javascript）後編輯一個li元素？

Question

我在香草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！ 謝謝！

Answer 1

可以使用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>