Question

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

仅在按下标签键时触发（此操作正常）
插入一个新元素（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>

为了添加一行输入，如您必须创建的注释中所述，并在表中添加一个新行，创建3个单元格，并为每个单元格添加相应的输入字段并设置tab事件处理程序，例如on最后一个细胞。

要在表格中创建新行，您可以参考insertRow，而为了添加新单元格，您可以查看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>

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

2 个答案: