jQuery найти следующую форму Элемент для навигации (некоторые поля динамически добавляются в форму)

Question

Я хочу переместить навигацию с клавиши табуляции на клавишу Enter. Для этого я подключил событие нажатия клавиши вида

$("form").live("keypress", function (e) {
        if (e.keyCode == 13) {
           //here should come the code for finding next element and focusing it
          return false; // this line prevents submission of form on enter key
}

В этой функции мне просто нужно найти следующий элемент формы и перенести фокус на него. Чтобы получить следующий элемент формы, я использовал селектор из этого ответа . Но есть несколько проблем с этим:

1. не обслуживает списки выбора и любые другие элементы, кроме ввода.
2. не обслуживает скрытые, отключенные и доступные только для чтения входы

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

 $('form input,form select').each(function (ind, elem) {
                alert($(elem).attr("name"));
                alert($(elem).index());
            });

Существует множество элементов формы с индексом 0. Примечательно, что некоторые элементы формы вставляются в DOM с использованием JavaScript, т.е. после загрузки страницы. Как я могу решить эту проблему?

Answer 1

я смог выполнить эту задачу, используя следующий код

 $("form").live("keypress", function (e) {
        if (e.keyCode == 13) {
            var $fomrElements = $('form input,form select').not(":hidden").not(":disabled");
            var $nextIndex = $fomrElements.index(e.target) + 1;
            var $nextInput = $fomrElements.eq($nextIndex);
            $nextInput.focus();
            return false;
        }
    });

Answer 2

Как то так?Возможно, вам придется повозиться с функцией isFocusableInput, чтобы получить желаемый эффект.Я оставил console.log с, чтобы вы могли видеть, что происходит.

$("form").live("keypress", function (e) {
    function isFocusableInput(el) {
        // TODO - e.g.
        var $el = $(el);
        var typeOk = !el.type || !el.type.match(/^(hidden)$/);
        return $el.is(":visible") && typeOk && !$el.is('[readonly]') && !$el.is('[disabled]');
    }
    function findFocusableInput($form, $input) {
        var inputs = $form.find(":input");
        console.log(inputs);
        var thisIdx = inputs.index($input);
        console.log("thisIdx=" + thisIdx);
        var count = 0;
        var input = null;
        // -1 because we don't want to focus the original element
        while (++count < inputs.length-1) {
            var i = (thisIdx+count)%inputs.length;
            input = inputs.eq(i)[0];
            console.log(i + "," + input.tagName);
            console.log(input);
            if (isFocusableInput(input)) {
                return input;
            }
        }
        return null;
    }
    var $input = $(e.target);
    var $form = $(this);
    console.log($input);
    console.log($form);
    if (e.keyCode == 13) {
        e.stopPropagation();
        var focusableInput = findFocusableInput($form, $input);
        console.log(focusableInput);
        if (focusableInput) {
            focusableInput.focus();
        }
        return false;
    }
});