javascript - jquery .next ('input' ).focus()

Question

Passcoder是我制作的jquery库，即将发布。它将输入字段拆分为单字符输入框(如 iPhone 密码)。其中一项功能是在按下按钮时聚焦下一个输入。

问题似乎是 .next('.passcoder') 没有达到预期的效果。在第一行输入(员工姓名输入)上，它将按预期运行，但是当它应该关注第一个密码输入(从第四个员工姓名到密码)时， .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/ 看到它的工作情况