当您按Tab时，则应在不使用标签索引的情况下跳至下一个空白文本输入框javascript

Question

表单中的示例有多个输入字段，其中有些字段在此之前会自动填充，如果我按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();
    }
});

Answer 1

我会将事件更改为keydown而不是keyup ，因为keyup已经已经处理了tab事件本身，并且那时您没有可以做的真正的取消操作（您可以直观地看到它跳到下一个字段，然后下一个空白代码已选择）

对于其他情况，我建议您首先获取所有元素，然后检查触发了事件的字段，然后开始检查索引+ 1中的其他字段

因此，总的来说，我想我会编写类似以下内容的代码（无需blur您当前所在的字段， focus于新字段即可）

有一个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>