テキストをダブルクリックした後にli要素を編集できるようにするにはどうすればいいですか？

Question

私はバニラのjavascriptでtodoリストプロジェクトを作成しており、ダブルクリックのマウスイベントでリストの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>