1

我有一个包含 13 的表单fieldsets,每个包含非统一数量的字段。我想使用选项卡在字段之间导航,最后它将转到下一个fieldset

我写了一个 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但它不能正常工作

4

1 回答 1

0

手动聚焦初始元素

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

并使用tabindex,效果很好。见小提琴。另请阅读这篇文章 - 关于使用 tabindexes 的一些有趣的事情。

于 2013-11-13T07:24:56.427 回答