Question

当我在当前文本框中按Enter键时，我希望将注意力集中在下一个文本框上，而不管它是在DOM上。

我没有故意放置任何代码示例，因为我没有任何特定的场景。我的页面通过ajax调用加载，我不知道DOM结构。

我正在寻找使用type[text]而非使用任何class或id属性的解决方案。

我经历过Link1 Link2 Link3。我也尝试使用下面的代码示例：

$('body').on('keypress', 'input[type=text]', function (e) {
    var key = e.which;
    if (key == 13) { // the enter key code
        debugger;
        $(this).closest('.ModalYearItem')
            .next().next().next()
            .find('.TargetMixPercent').focus();

        //  $(this).parents().nextAll('[type=text]').focus()   Approach 2
        //  $(this).parents().siblings()
        //      .find('[type=text]').next(':eq(0)').closest('type=text')    Approach 3
        return false;
    }
})

Answer 1

您可以使用活动聚焦输入的索引，只需根据下一个索引移动到下一个输入。

这是一个很明显的长版本：

$(document).on('keypress', 'input[type=text]', function (e) {
    var key = e.which;
    if (key == 13) {
        var $el = $(this);
        var $inputs = $(':input');
        var indx = $inputs.index($el);
        $inputs.eq(indx + 1).focus();
    }
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/mqnthf4n/2/

在jQueryUI中，您还有一个:focusable选择器（https://api.jqueryui.com/focusable-selector/），其中包含可以聚焦的所有内容（包括非input元素！）。否则你需要自己照顾各种类型。

请注意，此解释性版本不会在最后处理回绕到第一个输入，但您可以自己添加范围检查，如下例所示：http://jsfiddle.net/TrueBlueAussie/mqnthf4n/4/

注意：

我在委派的事件中将'body'更改为document，因为body有错误（与样式相关），这可能意味着某些事件不会冒泡到它。使用document总是更安全（由于不需要解析，因此速度也快一点）。泡沫链中一个额外元素的开销可以忽略不计。

Answer 2

请参阅示例代码请参阅http://jsfiddle.net/xalvin11/typw6c8v/

$(':input').each(function (idx) {
    $(this).on('keypress', function (e) {
        if (e.which === 13) {
            var nextInput = $(':input').get(idx + 1);
            if (nextInput)
                nextInput.focus();
        }
    });
});

将焦点设置在页面上的下一个文本框的最佳方法

2 个答案: