雙擊文本后如何使 li 元素可編輯（在 vanilla Javascript 中）？

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 屬性，並將單擊時的屬性添加到所需元素：

 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>