Onkeydown JS函数添加调用相同函数的输入

Question

我正在处理一个表单并尝试创建一个 onkeydown 函数来执行以下操作：

仅在按下 tab 键 时触发（正常工作）
插入一个新元素 (input)（一切正常）
然后插入的 input 调用相同的 onkeydown 函数（卡在这里！）

尝试了增量 ++ 但不起作用？

以下是我的计划：

<html>
<head>


</head>

<body>
    <form>
        <input type ="text" OnKeydown = "tab(event)" />
        <div id ="insert">

        </div>
    </form>


</body>


<script>
    function tab(event) {
        if (event.keyCode == 9) {
            var ins = '<input  type ="text" OnKeydown = "tab(event)"/>'; 
            document.getElementById("insert").innerHTML=ins;
            ins++;
        }
    };
</script>

</html>

Answer 1

兴趣点是：

使用 addEventListener
在 DOMContentLoaded
使用input autofocus attribute
使用appendChild将新创建的元素插入DOM

function tab(event) {
  if (event.keyCode == 9) {
    // remove the event listener for the old element
    event.target.removeEventListener('keydown', tab);
    
    
    var ins = document.createElement("input");
    ins.type = "text";
    ins.autofocus = true;
    document.getElementById("insert").appendChild(ins);
    ins.addEventListener('keydown', tab, false);
  }
}

window.addEventListener('DOMContentLoaded', function(e) {
  document.getElementsByTagName("input")[0].addEventListener('keydown', tab, false);
}, false);

<form>
    <input type ="text"/>
    <div id ="insert">
    </div>
</form>

为了像评论中描述的那样添加一行输入，您必须创建一个新行并将其附加到 table，创建 3 个单元格并为每个单元格添加相应的输入字段并设置最后一个单元格上的选项卡事件处理程序。

要在 table 中创建一个新行，您可以参考 insertRow, while in order to add new cells you can take a look to insertCell

function tab(event) {
  if (event.keyCode == 9) {
    event.target.removeEventListener('keydown', tab);

    var table = document.getElementById('tbl').getElementsByTagName('tbody')[0];

    var newRow = table.insertRow(table.rows.length);

    var newCell = newRow.insertCell(-1);
    var ins = document.createElement("input");
    ins.type = "number";
    ins.autofocus = true;
    newCell.appendChild(ins);

    newCell = newRow.insertCell(-1);
    ins = document.createElement("input");
    ins.type = "text";
    ins.autofocus = true;
    newCell.appendChild(ins);

    newCell = newRow.insertCell(-1);
    ins = document.createElement("input");
    ins.type = "number";
    ins.autofocus = true;
    newCell.appendChild(ins);

    ins.addEventListener('keydown', tab, false);
    setTimeout(function () {
      ins.focus();
    }, 10);
  }
}

window.addEventListener('DOMContentLoaded', function (e) {
  document.getElementsByTagName("input")[0].addEventListener('keydown', tab, false);
}, false);

<form>
    <input type="text"/>

    <div id="insert">
        <table id="tbl">
            <thead>
            <tr>
                <th>Number</th>
                <th>Text</th>
                <th>Number</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</form>

Answer 2

<html>
<head>


</head>

<body>
    <form>
    <input type ="text" OnKeydown = "tab(event)" />
    <div id ="insert">

    </div>
    </form>


</body>


<script>
function tab(event) {
if (event.keyCode == 9)
        {
        var input = document.createElement("input");
        input.type = "text";
        input.setAttribute("OnKeydown","tab(event)");
       // var ins = '<input  type ="text" OnKeydown = "tab(event)"/>'; 
       var div= document.getElementById("insert")
        div.appendChild(input);
        }

};


</script>

</html>

Answer 3

   document.onkeydown = function (e) {
            switch (e.keyCode) {
            case 37:
                 //left arrow
                 alert('left arrow pressed');
                 break;
            case 38:
                 //up arrow
                 alert('up arrow pressed');
                 break;
            case 39:
                 //right arrow
                 alert('right arrow pressed');
                 break;
             case 40:
                 var createfield = 
                 '<br><input type="text" name= "abc[]"><br>';
                 document.getElementById('inputFields').innerHTML += createfield;  
                    break;
              default:
              //get keycode by using e.keyCode
                 alert(e.keyCode);
                 break;
            }
        };

    <body>
        <div class="input_fields_wrap">

            <div><input type="text" name="abc[]"></div>
        </div>
        <div id="inputFields"></div>
    </body>

Onkeydown JS函数添加调用相同函数的输入

Onkeydown JS function to add an input that calls the same function

html

javascript

function

keycode

increment