表单中有多个输入字段的示例,因为有一些字段在此之前会自动填充,如果我按 Tab 键,那么它应该跳过该自动填充的输入字段并应转到空白输入字段
我尝试过,但是当我开始在空白输入中写入时会发生什么,它也会自动填充并跳过它
$(".item-input").keyup(function () {
if (this.value.length !== 0) {
var $next = $(this).next('.item-input');
if ($next.length)
$(this).next('.item-input').focus();
else
$(this).blur();
}
});
最佳答案
我会将事件更改为 keydown
而不是 keyup
,因为 keyup
本身已经处理了选项卡事件,并且没有那时您可以进行真正的取消(在选择下一个空代码之前,您将直观地看到它跳转到下一个字段)
剩下的,我建议你先获取所有元素,然后检查哪个字段触发了事件,然后从索引+1开始检查其他字段
所以总的来说,我想我会编写如下代码(不需要模糊
您当前所在的字段,聚焦
新字段即可)
有一个 shiftKey
的句柄,以便用户仍然可以使用 shift+tab 返回:)(我在该检查来源的链接中评论了)
let itemInputs = Array.from( document.querySelectorAll('.item-input') );
$('.item-input').on('keydown', function( e ) {
if (e.shiftKey) {
// no handling here
// see: https://stackoverflow.com/questions/3044083/what-is-the-key-code-for-shifttab
return;
}
switch (e.keyCode) {
case 9:
// we could have the loop in here, but hey, default returns out of the function
// so this just skips till behind the switch statement
break;
default:
return;
}
// find where we are in the original fieldset
let index = itemInputs.findIndex( v => e.target === v ) + 1;
// if we are equal or larger then itemInputs
while (index < itemInputs.length) {
if (itemInputs[index].value.length === 0) {
// prevent the default step
e.preventDefault();
itemInputs[index].focus();
return;
}
// try next
index++;
}
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<div class="field">
<span class="label">Text 1</span>
<span class="value"><input type="text" value="" class="item-input" /></span>
</div>
<div class="field">
<span class="label">Text 2</span>
<span class="value"><input type="text" value="Skip me" class="item-input" /></span>
</div>
<div class="field">
<span class="label">Text 3</span>
<span class="value"><input type="text" value="" class="item-input" /></span>
</div>
<div class="field">
<span class="label">Text 4</span>
<span class="value"><input type="text" value="" class="item-input" /></span>
</div>
</fieldset>
关于javascript - 当您按 Tab 时,它应该 Tab 到下一个空白文本输入框 JavaScript,而不使用 Tab 索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57749849/