нажатие на вкладке переходит к следующему набору полей

Question

У меня есть форма, содержащая 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.

Я даю подробности моей первой 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.