0

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

5 回答 5

4

You can use prevAll and nextAll with the selector :first to find the next and the previous element:

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

于 2013-06-28T09:23:51.603 回答
0

我认为您的问题是使用数字键盘。尝试使用您的普通号码，或将密钥代码 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;
    }
});
于 2013-06-28T09:16:42.623 回答
0

试试这个

$(this).nextAll(".passcoder").eq(0).focus();
于 2013-06-28T09:20:26.797 回答
0

According to the jQuery.next documentation:

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 next method does not return the input.

于 2013-06-28T09:24:05.590 回答
0

Try this

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

var next = $(this).next('.passcoder');
if (next.length>0) {
    next.focus();
} else {
    $(this).nextUntil('.passcoder').next('.passcoder').focus();
}
于 2013-06-28T09:24:11.860 回答