Question

我有一个大型表单，我想通过按Enter而不是tab来浏览。我有一个简单的脚本工作正常，直到我添加一些禁用字段混合。如何跳过具有禁用属性的字段？

我尝试过使用循环，但我无法让它一起跳过两个禁用的字段并将焦点集中到下一个字段，因为它似乎会在残障字段之前留在字段上。

如果失败了，有没有办法用输入键的13替换输入keyCode？我在这里尝试了一些解决方案，但它们似乎都没有工作

$('input').on('keydown', function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        $('input')[$('input').index(this)+1].focus();
    }
});

Answer 1

您可以使用:enabled selector。

$('input').on('keydown', function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        $('input:enabled')[$('input:enabled').index(this)+1].focus();
    }
});

JSFiddle

Answer 2

您可以只过滤集合并删除已禁用的输入，并缓存选择器可以节省三次DOM查找。

请注意，:enabled和.not([disabled])之间存在细微差别，前者选择布尔禁用属性严格等于false的元素，而后者选择没有禁用属性的元素设置（无论其值如何）。

var inputs = $('input');

inputs.on('keydown', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();

        var enabled = inputs.not('[disabled]');

        enabled.eq( enabled.index(this) + 1 ).focus();
    }
});

Answer 3

<input />
<input />
<input disabled="disabled"/>
<input />

$('input').on('keydown', function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        var enabledInput = $('input').not('[disabled]');
        enabledInput.eq( enabledInput.index(this) + 1 ).focus();        
    }
});

jquery找到没有属性的下一个元素

3 个答案: