1

我是 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>

查询：

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

}
});

任何帮助将不胜感激！

4

2 回答 2

4

您的选择器中有错误。

$('.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"

于 2013-07-11T19:01:19.973 回答
0

给你。看看代码...

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将用户的焦点设置到该元素，因此将光标放在此处的下一个输入中

于 2013-07-11T19:06:26.553 回答