jquery .next('输入').focus()答案

【问题标题】：jquery .next('input').focus()jquery .next('输入').focus()
【发布时间】：2013-06-28 09:08:52
【问题描述】：

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

【问题讨论】：

$(this).val('');而不是 value()
对不起，我把它粘贴到这里后在代码中修复了它。对此感到抱歉

标签： javascript jquery focus

【解决方案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/看到这个工作

【讨论】：

谢谢。我试过nextAll('.passcoder')。如果我错了，请纠正我，但 nextAll 返回列表中的所有下一个元素，因此 :first 选择器将仅返回列表的第一个。
@JacobValenta 你是对的，只返回第一个，如果是prev，第一个是最接近的元素。

【解决方案2】：

我认为您的问题是使用数字键盘。尝试使用您的普通号码，或将密钥代码 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;
    }
});

【讨论】：

试试小提琴。它不起作用。它适用于前 3 个输入，但不会从第 4 个变为第 5 个

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

根据jQuery.nextdocumentation：

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

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

【讨论】：

检查你传递给 .next() 的参数，它可以让你过滤它。我放了'.passcoder'，所以它应该找到下一个带有passcoder类的元素
如果我很好理解文档的状态，当您将 arg 传递给 next 时，它仅在匹配该选择器（在在这种情况下，它没有，所以它什么也没有返回）。
啊，谢谢！这似乎有点令人困惑，因为 .next 似乎是一个“get”而不是“if”类型的函数。
@JacobValenta +1，如果你习惯于prototypeJS，那就更令人困惑了，它也有一个next 方法，但恕我直言，它的行为更直观。

【解决方案5】：

试试这个

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

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

【讨论】：