Question

我是jquery的新手。我试图在用户输入正确的格式/模式（正则表达式值）后自动移动到下一个字段。

这是我到目前为止所做的：

形式：

<form>
<label for="serial_number">Serial Number: </label>
<input type="text" id="serial_number" name="serial_number" placeholder="Serial Number" pattern="[0-9]{5}" maxlength="5" required autofocus />

<input type="text" id="second_entry" name="second_entry" placeholder="second_entry" pattern="[0-9]{5}" maxlength="5" required />

<input type="submit" value="Process" />
</form>

Jquery的：

$('.serial_number').keyup(function() {
var inputVal = $(this).val();
var characterReg = /^[0-9]\d{20}$/;
if(characterReg.test(inputVal)) {

$("serial_number").change(function() {
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();
});

}
});

非常感谢任何帮助！

Answer 1

选择器中有错误。

$('.serial_number').keyup(function() {

到

$('#serial_number').keyup(function() {

更新：请尝试以下代码：

$('#serial_number').keyup(function () {
    var inputVal = $(this).val();
    var characterReg = /^[0-9]{5}$/;        
    if (characterReg.test(inputVal)) {
        var inputs = $(this).closest('form').find(':input');
        inputs.eq(inputs.index(this) + 1).focus();
    }
});

不需要.change()。请检查此JSFiddle

您还需要将regex更改为

var characterReg = / ^ [0-9] {5} $ /;

在jQuery代码中，因为你有maxlength="5"

Answer 2

你在这里。看看代码......

http://jsfiddle.net/aVdex/

jQuery(document).ready(function() {
    $('#serial_number').keyup(function() {
        var inputVal = $(this).val();
        var characterReg = /^\d{5}$/;
        if(characterReg.test(inputVal)) {
            $("#serial_number").next("input").focus();
        }
    });
});

对于ID，您应该使用#选择器。对于课程，请使用.。在输入失去焦点之前，change事件不会被触发，因此您需要在keyup事件中进行所有检查。您可以使用next函数来获取元素的直接兄弟。 Focus将用户的焦点设置为该元素，因此将光标放在此处的下一个输入中

输入后移动到下一个字段

2 个答案: