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()

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟只有与该选择器匹配。

您首先拥有父div，这意味着.next("input")为空，因为没有兄弟元素。您需要执行以下操作：

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

这将：

转到$(this)
转到下一个元素（成为class="field_wrap"的下一个元素）
找到第一个输入元素
抓住长度

将ENTER功能更改为TAB

1 个答案: