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

Passcoder是我已经发布并将发布的jQuery库。它将输入字段分成单字符输入框（如iPhone密码）。其中一个功能是将焦点放在下一个输入点上，然后按下一个按钮。jquery .next（'input'）。focus（）

问题似乎是.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; 
    } 
});

来源

2013-06-28 Jacob Valenta

$（本）.VAL（ ''）;而不是价值（） – mkutyba

对不起，我在这里粘贴它后，在代码中解决了这个问题。对不起，关于 –

您可以使用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/

来源

2013-06-28 09:23:51

谢谢。我曾尝试过'nextAll（'。passcoder'）'。纠正我，如果我错了，但nextAll返回列表中的所有下一个元素，所以：第一个选择器将只返回列表的第一个。 –

@JacobValenta你是对的，只返回第一个，在'prev'的情况下，第一个是最接近的元素。 –

我认为你的问题是使用数字键盘。尝试使用正常的数字，或添加键码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-28 09:16:42 Kersten

这里的小提琴http://jsfiddle.net/Za9MG/ – Kersten

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

啊对不起，等一下 – Kersten

试试这个

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

来源

2013-06-28 09:20:26 leonhart

按照jQuery.nextdocumentation：

获取紧随其后的各元素的同级的集合中的匹配的元素。如果提供了选择器，则只有在匹配该选择器时才会检索下一个兄弟。

既然你有你的input之间的<br>和<h4>，该next方法不返回输入。

来源

2013-06-28 09:24:05 orique

检查您传递给.next（）的arg是否允许您过滤它。我放 '。passcoder'，所以它应该找到一个带有一类passcoder的下一个元素 –

如果我很好地理解了这个文档的状态，当你将一个arg传递给'next'时，它将检索紧接着的下一个兄弟（在这个例子中是
）匹配该选择器（在这种情况下，它不会，因此它不会返回任何内容）。 – orique

啊，谢谢！这似乎有点令人困惑，因为.next看起来像是'get'而不是'if'类型的函数。 –

试试这个

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-28 09:24:11 mkutyba

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

回答

相关问题