jQuery .next（'input'）。focus（）

Question

Passcoder是我制作的并且即将发布的jquery库。 它将输入字段拆分为一个字符的输入框（例如iPhone密码）。 它的功能之一是可以集中您按下按钮的下一个输入。

问题似乎是.next('.passcoder')不能完成预期的工作。 在输入的第一行（employee_name输入）上，其行为将与预期的一样，但是当应该集中输入第一个密码输入（从第四名员工名到密码）时， .next('.passcoder')执行不退货。

标记：

<form action="" method="post"
    <h4>Employee Number</h4>
        <input type="text" class="single-character-name passcoder" name="employee_number-0">
        <input type="text" class="single-character-name passcoder" name="employee_number-1">
        <input type="text" class="single-character-name passcoder" name="employee_number-2">
        <input type="text" class="single-character-name passcoder" name="employee_number-3">
    <br>
    <h4>Employee Passcode</h4>
        <input type="password" class="single-character-password passcoder" name="employee_passcode-0">
        <input type="password" class="single-character-password passcoder" name="employee_passcode-1">
        <input type="password" class="single-character-password passcoder" name="employee_passcode-2">
        <input type="password" class="single-character-password passcoder" name="employee_passcode-3">
    <br />
    <br />
        <input class="btn btn-success" type="submit">
        <a class="btn">Cancel</a>
</form>

javascript（jQuery）：

$('.passcoder').keyup(function(e){
    if (e.which == 8){
        //backspace
        $(this).prev('input').focus();
    }
    else if(e.which > 47 && e.which < 58){
        $(this).next('.passcoder').focus();
    }
    else{
        $(this).val('');
        return false;
    }
});

Answer 1

您可以将prevAll和nextAll与选择器:first以查找下一个和上一个元素：

$('.passcoder').keyup(function(e){
    if (e.which == 8){
        //backspace
        $(this).prevAll('input:first').focus();
    }
    else if(e.which > 47 && e.which < 58){
        $(this).nextAll('.passcoder:first').focus();
    }
    else{
        $(this).val('');
        return false;
    }
});

您可以在http://jsfiddle.net/V7SHp/上看到此功能

Answer 2

我认为您的问题是使用数字键盘。 尝试使用您的普通数字，或者else if阻止时(e.which > 47 && e.which < 58) || (e.which > 96 && e.which < 106)将键码97添加到105。 (e.which > 47 && e.which < 58) || (e.which > 96 && e.which < 106)

$('.passcoder').keyup(function (e) {
    if (e.which == 8) {
        //backspace
        $(this).prev('input').focus();
    } else if ((e.which > 47 && e.which < 58) || (e.which > 96 && e.which < 106)) {
        $(this).next('.passcoder').focus();
    } else {
        $(this).value('');
        return false;
    }
});

Answer 3

尝试这个

$(this).nextAll(".passcoder").eq(0).focus();

Answer 4

根据jQuery.next 文档 ：

获取匹配的元素集中每个元素的紧随其后的同级。 如果提供了选择器，则仅当与该选择器匹配时才检索下一个同级。

由于input之间有<br>和<h4> ，因此next方法不会返回输入。

Answer 5

尝试这个

http://jsfiddle.net/mattydsw/DDNbQ/

var next = $(this).next('.passcoder');
if (next.length>0) {
    next.focus();
} else {
    $(this).nextUntil('.passcoder').next('.passcoder').focus();
}