jquery Найти следующий элемент без атрибута

Question

У меня есть большая форма, которую я хочу перемещать, нажав Enter вместо вкладки. У меня есть простой скрипт, который работал нормально, пока я не добавил некоторые отключенные поля в микс. Как я могу пропустить поля, у которых есть атрибут disabled?

Я пробовал использовать цикл, но я не могу заставить его пропускать два отключенных поля вместе и сфокусироваться на следующем, поскольку он, кажется, остается на поле перед отключенными.

Если это не так, есть ли способ заменить ключ ввода кода 13 на вкладку? Я попробовал несколько решений здесь, но ни один из них не похож на работу

$('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]), первая выбирает элементы, у которых есть свойство boolean 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();   
    } 
});