Получение jQuery для перемещения / перемещения фокуса на следующий элемент ввода при нажатии клавиш

Question

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

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

Ранее я пытался использовать jquery .live и .keypress безрезультатно.Вот код, который у меня есть на момент написания этой статьи.

$('.fmq').keypress(function() {
    $(this).next().focus();
}

А вот и разметка, которая у меня есть

<input name="serial[1]" type="text" maxlength="1" class="fmq">
<input name="serial[2]" type="text" maxlength="1" class="fmq">
<input name="serial[3]" type="text" maxlength="1" class="fmq">
<input name="serial[4]" type="text" maxlength="1" class="fmq">
<input name="serial[5]" type="text" maxlength="1" class="fmq">
<input name="serial[6]" type="text" maxlength="1" class="fmq">

Надеюсь, этого достаточно, чтобы понять смысл, если не топожалуйста, попросите у меня больше.

Благодарим вас за любую помощь и извинения, если она была опубликована ранее.

Приветствия,

Дан.

Answer 1

Вы не закрыли свой звонок на keypress:

$('.fmq').keypress(function() {
    $(this).next().focus();
});

Это работает для меня.

Answer 2

JQuery UI уже имеет это, в моем примере ниже я включил атрибут maxchar, чтобы сосредоточиться на следующем элементе с фокусировкой (input, select, textarea, button and object)

text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
<option value="1">1</option>
<option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
<option value="1">1</option>
<option value="1">2</option>
</select>


$(function() {
    var focusables = $(":focusable");   
    focusables.keyup(function(e) {
        var maxchar = false;
        if ($(this).attr("maxchar")) {
            if ($(this).val().length >= $(this).attr("maxchar"))
                maxchar = true;
            }
        if (e.keyCode == 13 || maxchar) {
            var current = focusables.index(this),
                next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
                next.focus();
        }
    });
});