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

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

提问by Jacob Valenta

Passcoder is jquery library that I have made and will be releasing. It splits an input field into one-character input boxes (like the iPhone passcode). One of the features it to focus the next input one you press a button.

Passcoder 是我制作并将发布的 jquery 库。它将输入字段拆分为一个字符的输入框（如 iPhone 密码）。它的一项功能是聚焦您按下按钮的下一个输入。

The problem seems to be that the .next('.passcoder')does not do what is expected. On the first row of inputs (the employee_name inputs) it will behave as expected, but when it is supposed to focus the first of the password inputs (going from the forth employee name to password) the .next('.passcoder')does not return anything.

问题似乎是.next('.passcoder')没有做预期的事情。在输入的第一行（employee_name 输入）上，它将按预期运行，但是当它应该关注第一个密码输入（从第四个员工姓名到密码）时，.next('.passcoder')它不会返回任何内容。

The markup:

标记：

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

The javascript (jQuery):

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

回答by Jonathan Naguin

You can use prevAlland nextAllwith the selector :firstto find the next and the previous element:

您可以使用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;
    }
});

You can see this working at http://jsfiddle.net/V7SHp/

你可以在http://jsfiddle.net/V7SHp/看到这个工作

回答by orique

According to the jQuery.nextdocumentation:

根据jQuery.next文档：

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

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

Since you have a <br>and a <h4>between your input, the nextmethod does not return the input.

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

回答by mkutyba

Try this

尝试这个

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

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

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

回答by Kersten

I think your problem is using the num pad. Try using your normal numbers, or add keycode 97 to 105 to you else ifblock (e.which > 47 && e.which < 58) || (e.which > 96 && e.which < 106)

我认为您的问题是使用数字键盘。尝试使用您的普通号码，或添加键码 97 到 105 来else if阻止(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;
    }
});

回答by leonhart

try this

尝试这个

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