Изменение функции ENTER на TAB

Question

У меня есть форма, где я бы хотел, чтобы действие ENTER переместилось в следующее поле ввода вместо отправки формы. Я пробовал код ниже и сотни вариантов, но я явно делаю что-то неправильно.

Строка 24 всегда вычисляет длину 0, так что 27 никогда не выполняется. Здесь, как текст, а не изображения:

$('form input').keydown(function(e) { 
    // The this keyword is <div id="input_form"> 
    if(e.keyCode == 13){ 

     e.preventDefault(); // cancel default 13 key behaviour (submitting form) 
     var n = $(this).next('input').length; 
     console.log("nexts=" + n); 
     if($(this).next('input').length) { // if there's another field 
      $(this).next('input').focus(); // move focus to next field in form 
     } 
     else { 
      $(this).blur(); 
     } 

    } 
}); 

форма является

<form action="" class="my_input_form" enctype="multipart/form-data" id="my_input_form_5" method="post" name=""> 

    <!--   First Name   --> 
    <div id="first_name_wrap" class="field_wrap" > 
     <label for="first_name" id="first_name_label" class="form_label">First Name</label> 
     <br /> 
     <input id="first_name" class="field_input" name="first_name" placeholder="" type="text" value="<?php echo $first_name?>"> 

     <div class="form_field_error" id="first_name_error" style="display:none;"></div> 
    </div> 

    <!--   Last Name   --> 
    <div id="last_name_wrap" class="field_wrap"> 
     <label for="last_name" id="last_name_label" class="form_label">Last Name</label> 
     <br /> 
     <input id="last_name" class="field_input" name="last_name" placeholder="" type="text" value="<?php echo $last_name?>"> 
     <div class="form_field_error" id="last_name_error" style="display:none;"></div> 
    </div> 

ли кто-нибудь увидеть проблему?

Answer 1

.next()

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

У вас есть родительский div, что означает, что .next("input") пуст, потому что нет элемента-брата. Вам нужно сделать что-то вроде:

$(this).parent().next(".field_wrap").find("input").length 

Это будет:

1. Перейти к родительскому элементу $(this)
2. Перейти к следующему элементу (будучи следующий элемент с class="field_wrap")
3. Найти первый входной элемент
4. Захватить длину