jquery .next ('input'). Focus()

Question

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

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

Answer 2

Я думаю, ваша проблема с использованием Num Pad. Попробуйте использовать свои обычные номера, или добавить код ключа 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; 
    } 
}); 

Answer 3

попробовать это

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

Answer 4

Согласно jQuery.nextdocumentation:

Получить сразу после родственный каждого элемента в наборе соответствующих элементов. Если предоставляется селектор, он извлекает следующий сингл , только если он соответствует этому селектору.

Поскольку у вас есть <br> и <h4> между вашим input, метод next не возвращает вклад.

Answer 5

Попробуйте это

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

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