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

【问题标题】：Onkeydown JS function to add an input that calls the same functionOnkeydown JS函数添加调用相同函数的输入
【发布时间】：2016-07-13 16:32:49
【问题描述】：

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

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

尝试过 Increment ++ 但不起作用？

这就是我的目标：

<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>

【问题讨论】：

不要使用事件 HTML 属性。在 JS 中使用事件监听器。使用事件委托。如果我刚刚输入的任何内容听起来不熟悉，请考虑使用 jQuery。
ins++ 无效，因为您可以向 HTML 对象添加数字。 --- 至于例子，我建议使用我列出的术语使用谷歌。 --- 阅读是你最好的朋友。
简单示例：在form 元素上使用addEventListener。收听keydown 事件。检查event.target 是否是text 类型的input。如果是这样，请调用一个复制 input 元素的函数。
@user3464091 每次按下tab 键时，您是否都在寻找append 新输入？ EG：首先聚焦input，按下tab键，新的input被创建并聚焦，再次按下tab键，新的input被创建并聚焦，等等等等。我做了一个@987654321 @模拟这个过程。
是的，我想最终创建一个行，最后一个 input 调用相同的 function 添加一个新行/输入...

标签： javascript html function increment keycode

【解决方案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 个单元格，并为每个单元格添加相应的输入字段并将选项卡事件处理程序设置为例如最后一个单元格。

要在表格中创建新行，您可以参考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>

【讨论】：

感谢@gaetanoM，效果很好！唯一的问题是您单击以前的input，当按下选项卡时，该函数会一直被调用。另外，如果我想插入一行inputs，我应该把html放在哪里？
完美！ @gaetanoM 我将在行中添加各种inputs，因此 html 看起来像 <tr><td><input type="number" /></td><td><input type="text" /></td><td><input type="number" /></td></tr>
@user3464091 非常感谢。
太棒了，谢谢@gaetanoM 我可以从这里弄明白！

【解决方案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>

【讨论】：

谢谢。很好的解决方案，但同样的问题...点击返回，功能不断触发！

【解决方案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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。