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;
}
});
最佳答案
您可以将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/上看到此功能