Question

我正在寻找一段代码，如果用户按下前一个元素中的某个键，它会将光标的焦点移动/标记到标记中的元素。

e.g。每次用户在输入框中输入字符/数字时，焦点会自动标记到下一个输入框，就像在某些串行代码输入表单中一样。

我之前尝试过使用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属性，专注于下一个可聚焦元素（输入，选择，文本区域，按钮和对象）

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();
        }
    });
});

让jQuery将焦点移动/选项卡到按键上的下一个输入元素

2 个答案: