如何使用 jQuery 自动跳转到下一个字段？答案

【问题标题】：How can I automatically tab to the next field using jQuery?如何使用 jQuery 自动跳转到下一个字段？
【发布时间】：2011-09-15 16:17:17
【问题描述】：

在 jQuery 中，如何触发用户切换到下一个输入字段的行为？

我试过这个：

var e = jQuery.Event("keydown");
e.which = 9; // # Key code for the Tab key
$("input").trigger(e);

但触发事件不会将光标移动到下一个字段。

我想我可以使用focus() 手动移动光标，但决定下一个应该是哪个字段是浏览器已经知道如何做的事情，所以只触发一个选项卡似乎更干净。

有什么想法吗？

【问题讨论】：

标签： jquery javascript-events

【解决方案1】：

这是一个解决方案，通过http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find(':input').not('[type=hidden]');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

用法如下：

$( 'current_field_selector' ).focusNextInputField();

【讨论】：

【解决方案2】：

请参阅this question 的已接受答案。例如，如果您想在输入一定数量的字符后将焦点移至下一个字段，则可以在 keyup 事件中使用该代码，并检查输入的字符数。

该答案中的代码通过获取表单中的输入集、找到所选输入并将所选输入的索引加 1，然后在具有该索引的元素上触发 focus 事件来工作。

【讨论】：

【解决方案3】：

您是否尝试过使用

$("input").trigger( 'keypress', e );

作为解决方案？
我发现有时明确是最好的。如果这不起作用，甚至可能

$("input").trigger( 'keypress', [{preventDefault:function(){},keyCode:9}] );.

希望这会有所帮助。

【讨论】：

模拟按键不起作用，stackoverflow.com/questions/32428993/…

【解决方案4】：

有一个可用的 JQuery 插件：

http://www.mathachew.com/sandbox/jquery-autotab/

【讨论】：