javascript - div 内の入力要素がフォーカスされているときに enter キーが押されると、div が複製されます

Question

div の入力要素がフォーカスされているときに Enter キーが押されたときに div を複製する方法を教えてください。

その中に入力要素を持つdivがあります。この div を複製し、カーソルが入力要素内にあるときに Enter キーが押されるたびに、既存の div のすぐ下に配置する必要があります。

jquery を使用しないソリューションは非常に役立ちます。

ありがとう

Answer 1

ここに高レベルの概要があります...

• ofの要素のkeypressイベントをリッスンします。inputkeyCode13
• cloneNode()ノードのクローンを作成するために使用します。
• appendChild()複製された要素を挿入するなど、最適なノード挿入方法を使用してください。

Answer 2

これを試して

デモ

<div id='container'>
<div id='div1'>
<input type='text' onkeyup='clone_element(event)' />
</div>
</div>

<script>
function clone_element(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if(charCode == 13){
 var cDiv = document.getElementById("div1");
        var clonedDiv = cDiv.cloneNode (true);
        clonedDiv.id = "";
        var container = document.getElementById ("container");
        container.appendChild(clonedDiv);
}
}
</script>  

Answer 3

以下の関数を使用して、div を複製できます。これは、アレックスが言及した解決策である可能性があります。コードを追加しました。

function cloning(divid) {
    var container = document.getElementById(divid);
    var clone = document.getElementById('div_0').cloneNode(true);
    clone.setAttribute('id','div_'+document.getElementById(divid).getElementsByTagName('div').length);
    container.appendChild (clone);
}

Enterキーを押したときに上記の関数を呼び出します。

<script language = "javascript">
function searchKeyPress(e)
    {
    // look for window.event in case event isn't passed in
     if (typeof e == 'undefined' && window.event) { e = window.event; }
     if (e.keyCode == 13)
      {
        alert("Enter received");
        cloning('divid');
      }
    }   

</script>

<input type="text" onkeydown="searchKeyPress()">