HTMLコンテンツは1行のみで編集可能

Question

ユーザーは異なるリストを持つことができ、ユーザーは名前を編集できますが、新しい名前を入力すると、入力して多くの行を表示できるようになります。

編集可能な領域を1行にしたいとします。最大の高さとオーバーフローを隠して追加しましたが、それは文字通り、あなたが入力する他のものだけを隠すだけで、1行しか残さないようにします。

コード：

h3 { 
 
    height: 25px; 
 
    max-height: 25px; 
 
    overflow: hidden; 
 
}

<h3 contenteditable="true">To Do List</h3> 
 
<section id="pageOne" contenteditable="true"> 
 
    <li style="color: #393939;"></li> 
 
</section>

写真：@TarasDanylyukが言ったように

Answer 1

は、あなたが​​がaccomplisにpreventDefault()と組み合わせて使用​​することができますh。あなたははを入力したときに押されて、フォーカスを削除する場合

document.getElementById('pageOne').addEventListener('keydown', function(e) { 
 
    if (e.keyCode == 13) { // if Enter has been pressed 
 
    e.preventDefault(); 
 
    } 
 
});

h3 { 
 
    height: 25px; 
 
    max-height: 25px; 
 
    overflow: hidden; 
 
}

<h3 contenteditable="true">To Do List</h3> 
 
<section id="pageOne" contenteditable="true"> 
 
    <li style="color: #393939;"></li> 
 
</section>

、あなたがpreventDefault()呼び出しの後、この行を追加することによってそうすることができます：ここで

は、実施例だ

e.target.blur();