自动聚焦下一个输入字段

Question

如何自动聚焦下一个输入字段？

当所有输入字段像这样一个接一个地放置时

<div>
<input type="number" name="name">
<input type="number" name="name">
<input type="number" name="name">
</div>

你通常可以做这样的事情

this.nextSibling.nextSibling.focus();

但是，我遇到的情况是每个输入字段之间有可变数量的<span>标签。

类似的东西

<div>
<input type="number" name="name">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="number" name="name">
<span></span>
<input type="number" name="name">
<span></span>
<span></span>
<input type="number" name="name">
</div>

如何配置

this.nextSibling.nextSibling.focus();

到达下一个输入同级？

Answer 1

你可以继续循环nextElementSibling，直到找到与你要找的tagName相匹配的：

document.querySelectorAll('input').forEach((input) => {
input.oninput = function() {
let { nextElementSibling } = this;
while (nextElementSibling && nextElementSibling.tagName !== 'INPUT') {
nextElementSibling = nextElementSibling.nextElementSibling;
}
if (nextElementSibling) {
nextElementSibling.focus();
}
}
});

<div>
<input type="number" name="name">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="number" name="name">
<span></span>
<input type="number" name="name">
<span></span>
<span></span>
<input type="number" name="name">
</div>

如果要指定比tagName更具体的内容，可以使用Element.prototype.matches：

document.querySelectorAll('input').forEach((input) => {
input.oninput = function() {
let { nextElementSibling } = this;
while (nextElementSibling && !nextElementSibling.matches('input[name="foo"]')) {
nextElementSibling = nextElementSibling.nextElementSibling;
}
if (nextElementSibling) {
nextElementSibling.focus();
}
}
});

<div>
<input type="number" name="name">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="number" name="foo">
<span></span>
<input type="number" name="name">
<span></span>
<span></span>
<input type="number" name="foo">
</div>

请注意，使用nextElementSibling而不是nextSibling-nextSibling将选择相邻节点，而不仅仅是元素。(例如，nextSibling可以计算为文本节点，您不关心该节点。如果你想要一个元素，最好是具体的，并使用nextElementSibling.

Answer 2

<div>
<input type="number" tabindex="1" name="name">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="number" tabindex="2" name="name">
<span></span>
<input type="number" tabindex="3" name="name">
<span></span>
<span></span>
<input type="number" tabindex="4" name="name">
</div>

我在这个例子中使用tabindex是因为你的问题没有提供任何关于为什么我不能使用它的见解。

Answer 3

有一个相当简单的解决方案。对输入元素使用 id 属性。然后，您可以通过验证函数中的简单开关自动移动到下一个元素。

如：

function validateInput(input){
//Your validation code
switch(input.id){
case'input1':
document.getElementById('input2').focus();
break;
case'input2':
document.getElementById('input3').focus();
break;
case'input3':
document.getElementById('input4').focus();
break;
}
}
<input type='number' name='name' id='input1' onchange='validateInput(this)'>
<input type='number' name='name' id='input2' onchange='validateInput(this)'>

然后，您不必担心它在文档中的位置，您可以随时找到它。您甚至可以从开关内部进行验证，或者将其发送到外部函数，并在 validateInput 中继续

，返回非空值

Answer 4

您可以创建一个变量并跟踪当前输入。并且每次都增加它。并关注输入数组中的下一个输入。下面是代码

let inputs = document.querySelectorAll('input');
let i = 0;
inputs.forEach(inp => inp.oninput = () => inputs[i+1] && inputs[++i].focus())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="number" name="name">
<span></span>
<input type="number" name="name">
<span></span>
<input type="number" name="name">
<span></span>
<span></span>
<input type="number" name="name">
</div>