Как перенести фокус на следующее поле при нажатии клавиши ввода?

Ответ 1

Это не удается, потому что this является document в вашем коде.

Вы хотите использовать индекс текущего сфокусированного элемента (document.activeElement), или если вы используете делегированные события, вы можете убедиться, что this - текущий элемент.

Эта окончательная версия работает, есть ли tabindexes или нет. Он также обертывается вокруг:

JSFiddle 1: http://jsfiddle.net/TrueBlueAussie/5WkVW/11/

JSFiddle 2: http://jsfiddle.net/TrueBlueAussie/5WkVW/12/

Они оба используют настраиваемый селектор jQuery, который я добавляю, называемый :focusable, чтобы выбрать весь элемент фокусировки (включая ссылки):

// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input, [tabindex]');
    }
});

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(this) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});

Вы можете использовать тот же пользовательский селектор в обработчике событий, если хотите. Затем он будет работать даже с привязными ссылками (если вы измените событие на keydown вместо нажатия клавиши):

например.

$(document).on('keydown', ':focusable', function (e) {

Пример со ссылкой: http://jsfiddle.net/5WkVW/15/

Это также использует делегированный on, прослушивающий событие keydown на document. Затем он применяет селектор jQuery, затем применяет эту функцию к любому соответствующему элементу, вызвавшему событие. Это намного эффективнее, так как он использует только селектор во время события (вместо того, чтобы применять несколько обработчиков событий к каждому элементу соответствия DOM).

Старые версии ниже:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5WkVW/3/

$(document).keypress(function(e) {
    if(e.which == 13) {

            // Do something here if the popup is open
            //alert("dd")
            var index = $('.ui-dform-text').index(document.activeElement) + 1;
            $('.ui-dform-text').eq(index).focus();

    }
});

* Примечание: предупреждения могут помешать focus, поэтому используйте console.log для вывода, подобного этому, и просмотрите в большинстве отладочных окон браузера (например, инструменты отладки Chrome F12).

Обновление: http://jsfiddle.net/TrueBlueAussie/5WkVW/4/

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

$('input,select').on('keypress', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
        console.log($next.length);
        if (!$next.length) {
            $next = $('[tabIndex=1]');
        }
        $next.focus();
    }
});

Запрошенная версия "document": http://jsfiddle.net/TrueBlueAussie/5WkVW/5/

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
        console.log($next.length);
        if (!$next.length) {
            $next = $('[tabIndex=1]');
        }
        $next.focus();
    }
});

Ответ 2

Следующий код должен это сделать; он использует свойство tabIndex. Сообщите нам, если это неприемлемо:

$(function() {
    $('input').on('keypress', function(e) {
        e.which !== 13 || $('[tabIndex=' + (+this.tabIndex + 1) + ']')[0].focus();
    });
});

В раскрывающемся списке уже введен ключ для открытия раскрывающегося списка.

JS FIDDLE DEMO

Чтобы сделать что-то, прежде чем переходить к следующему элементу формы, вы можете использовать следующую версию:

$(function() {
    $(document).on('keypress', function(e) {
        var that = document.activeElement;
        if( e.which == 13 ) {
            e.preventDefault();
            alert( "dd" );
            $('[tabIndex=' + (+that.tabIndex + 1) + ']')[0].focus();
        }            
    });
});

DEMO

Ответ 3

На верхнем уровне div добавьте onKeyDown={this.onKeyDown.bind(this)} и добавьте следующий метод (ES6) в тот же класс, что и div:

onKeyDown(event) {
    if (event.keyCode === 13) {
        event.preventDefault()
        const inputs =
            Array.prototype.slice.call(document.querySelectorAll("input"))
        const index =
            (inputs.indexOf(document.activeElement) + 1) % inputs.length
        const input = inputs[index]
        input.focus()
        input.select()
    }
}

Ответ 4

Попробуйте этот код javascript, который я изменил из вашей скрипки. Поведение элементов выбора по умолчанию будет расширяться при нажатии клавиши. Знак плюса в начале + $(this).attr( "tabindex" )

преобразует значение текстового атрибута в int.

$(".ui-dform-text").keypress(function(e) {
    if(e.which == 13) {

            // Do something here if the popup is open
            alert($(this).attr("tabindex"));
            var index = +$(this).attr("tabindex") + 1;


            $("[tabindex='" + index +"']").focus();
    }
});

Надеюсь, это поможет. Если да, пожалуйста, дайте мне голосование. Приветствия.