我正在处理一个表单并尝试创建一个执行以下操作的 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>
最佳答案
兴趣点是:
- 用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>关于javascript - Onkeydown JS函数添加调用相同函数的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38357179/