javascript - 单击选项卡将移至下一个字段集

Question

我有一个包含 13 个字段集的表单，每个字段集包含数量不一致的字段。我想使用选项卡在字段之间导航，最后它将移至下一个字段集。

我写了一个 JavaScript，其中有

$('#formElem > fieldset').each(function(){
    var $fieldset = $(this);
        $fieldset.children(':last').find(':input').keydown(function(e){
            if (e.which == 9){
                $('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
                /* force the blur for validation */
                $(this).blur();
            e.preventDefault();
            }
        });
});

在我的表单中，当我的页面加载时，当我单击选项卡按钮时，它会移动到下一页，而不遍历当前 fieldset 中的字段，而是在下一个 fieldset 单击选项卡会使我的光标移动到几个字段，然后在没有完成我的字段的情况下再次移动到下一个 fieldset。

我在表单中提供了我的第一个字段集的详细信息

<form id="formElem" name="formElem" action="report_form_submit.jsp" method="post">
<fieldset class="step">

                            <legend>General Information </legend>
                            <table>
                            <tr><td>
                            <p>
                                <label for="centers" >Name of the Center</label>
                                <%
                                if(user_gr.equals("MA") || user_gr.equals("Ad")){
                                    %>
                                    <select name="centers" id="centers" >
                                <option value="">Select Center</option>

                                <!-- Populate Combobox from Database -->

                               <%
                                while(rsCenters.next()){
                                %>

                                <option value="<%= rsCenters.getInt("id") %>"><%= rsCenters.getString("c_name") %></option>
                                <%
                                }
                               // rsCenters.beforeFirst();
                                %>
                                <!-- Populate Combobox from Database -->

                                </select>
                                    <%
                                }
                                else{
                                    //System.out.println("...SQL CENTER :::"+sqlCenter);
                                    while(rsCenters.next()){
                                        center_name=rsCenters.getString("c_code");
                                    %>
                                    <input type="hidden" name="centers" id="centers" value="<%= rsCenters.getInt("id") %>" />
                                    <input type="text" name="" id="" value="<%= rsCenters.getString("c_name") %>" disabled/>
                                    <%
                                    }
                                }
                                %>

                                <!-- <input id="username" name="username" /> -->
                             <%
}
catch(Exception ex){

System.out.println(ex);
}
%>    
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="dt_enrolment">Date of enrolment</label>
                                <input tabindex="1" id="dt_enrolment" name="dt_enrolment" type="text" onclick="gen_dt()" />

                            </p>

                            </td>
                            <td>
                            <p>
                                <label for="srl_no">Serial No</label>
                                 <% if(!rsserial_no.next())
                                 {center_serial_no=center_name+1;}
                                 else
{
    String received_serial_no=rsserial_no.getString("serial_no");
    center_serial_no=received_serial_no.substring(0, 3);
    String center_serial_no1=received_serial_no.substring(3);
    //int new_serial_no=0;

     int new_serial_no=Integer.parseInt(center_serial_no1);

    new_serial_no=new_serial_no+1;
    center_serial_no=center_serial_no+new_serial_no;}%>
    <input type="hidden" name="srl_no" id="srl_no" value="<%= center_serial_no %>" />
                                <input id="" name="" type="text" value="<%=center_serial_no%>" disabled />


                            </p>
                            </td>
                            </tr>
                            <tr>
                            <td>
                            <p>
                                <label for="study_enrolment_no">Study enrolment No</label>
                                <input tabindex="2" id="study_enrolment_no" name="study_enrolment_no" type="text" />
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="nm">Name</label>
                                <input tabindex="3" id="nm" name="nm" type="text" />
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="age">Age</label>
                                <input tabindex="4" id="age" name="age" type="text"/>
                            </p>
                            </td>
                            </tr>
                            <tr>
                            <td>
                            <p>
                                <label for="gender">Gender</label>
                                <!-- <input id="gender" name="gender" type="text" /> -->
                                <select id="gender" name="gender" tabindex="">
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                                </select>
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="address">Address</label>
                                <input id="address" name="address" type="text" tabindex=""/>
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="ph_no">Phone No</label>
                                <input id="ph_no" name="ph_no" type="text" class="nocheck" tabindex=""/>
                            </p>
                            </td>
                            </tr>

                             <tr>
                            <td>
                            <p>
                                <label for="occupation">Occupation</label>
                                <input id="occupation" name="occupation" type="text" tabindex=""/>
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="marital_status">Marital status</label>
                                <select id="maritial_status" name="maritial_status" tabindex="">
                                    <option value="">Select</option>
                                    <option value="Yes">Married</option>
                                    <option value="No">Unmarried</option>
                                    </select>
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="blood_gr">Blood group</label>
                                <input id="blood_gr" name="blood_gr" type="text" tabindex=""/>
                            </p>
                            </td>
                            </tr>

                            <tr>
                            <td>
                            <p>
                                <label for="religion">Religion/Cast/Community</label>
                                <select id="religion" name="religion" class="nocheck" tabindex="">
                                    <option value="">Select</option>
                                    <option value="Hindu">Hindu</option>
                                    <option value="Muslim">Muslim</option>
                                    <option value="Christian">Christian</option>
                                    <option value="Buddhist">Buddhist</option>
                                    <option value="Other">Other</option>
                                </select>
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="vac_hbsag">Vaccinated for HBsAg</label>
                                <select id="vac_hbsag" name="vac_hbsag" tabindex="">
                                    <option value="">Select</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                    </select>                               
                            </p>
                            </td>
                            <td>
                            <p>
                                <label for="monthly_income">Monthly Income</label>
                                <input id="monthly_income" name="monthly_income" type="text" tabindex=""/>
                            </p>
                            </td>
                            </tr>

                            <tr>
                                <td colspan="3">

                                <p>
                                <label for="edu_level">Education level</label>
                                <select id="edu_level" name="edu_level" tabindex="">
                                    <option value="">Select</option>

                                    <%
                                while(rsLevel.next()){
                                %>

                                <option value="<%= rsLevel.getInt("id") %>"><%= rsLevel.getString("edu_name") %></option>
                                <%
                                }
                                %>

                                </select>
                            </p>
                                </td>
                            </tr>
                            </table>
                        </fieldset>

告诉我如何解决这个问题。即使我使用了 tabindex 但它无法正常工作

Answer 1

手动聚焦初始元素

document.getElementById("initFocus").focus();

并使用tabindex，效果很好。 See the fiddle 。另外read this - 关于使用 tabindexes 的一些有趣的事情。