Checkbox zum Button Fokus

Question

Ich habe mehrere Formulare auf meiner Seite. In einer Form habe ich 3 Textfelder, ein Kontrollkästchen und eine Schaltfläche. Wenn die Tabulatortaste gedrückt wird, geht es zu den 3 Textfeldern und dann zu der Checkbox und dann nirgendwo.

Wie kann ich die Schaltfläche (submit) nach dem Kontrollkästchen (maths) und dann zurück zum ersten Textfeld (user_id) konzentrieren.

<form id="form13"> 
User ID :<input type="text" id="user_id" /><br> 
Password: <input type="password" id="password" /><br> 
Department: <input type="text" id="department" /><br> 
<input type="checkbox" id="maths" value="on"> Maths 
<input type="submit" id="submit" value="Submit" /> 
</form> 

    $('#maths').keydown(function(e){ 
     if (e.which == 9){ 
      $('#submit).focus(); 
     } 
     }); 

Answer 1

Wenn Sie Tabbing in Ihren HTML-Formularen benötigen. Dann müssen Sie diese mit HTML attribute tabindex this is a good article for learning purpose zu handhaben:

<input id="foo" tabindex="1" /> 
<input id="bar" tabindex="3" /> 
<input id="awesome" tabindex="2" /> 

Also, Sie es in Ihrer Art und Weise handhaben kann. Und ja, Sie können es auch dynamisch ändern, indem Sie Javascript verwenden:

document.getElementById("foo").tabIndex = "3"; 

Ich hoffe, es kann Ihnen helfen.

Answer 2

Sie sollten Ihr Formular so organisieren, dass es nur mit der Tastatur navigiert werden kann. Schauen Sie sich zum Beispiel dieses Formular an: Accessible Signup form

Manuelles Einstellen des Tabindex kann zu problematischem Verhalten führen. Es gibt einige gute Artikel, warum sollten Sie es nicht tun:

• Using the tabindex attribute
• Don’t Use Tabindex Greater than 0

Beachten Sie, wenn manuell eine tabindex wie vorgeschlagen Einstellung, wird diese natürliche Fluss der Registerkarte Index in Form beeinflussen und dokumentieren. Verwenden Sie dies nur, wenn Sie sich absolut sicher sind.

Sie können Ihr Formular so organisieren, dass die Tastaturnavigation Ihres Formulars funktioniert, ohne dass Sie tabindex verwenden.

einen Blick auf folgende Pen haben: Form field focus, werden Sie sehen, dass von Checkbox, geht der Fokus direkt Taste einreichen und zurück:

<form id="form13"> 
    <label for="asdfg-user_id" id="user_id-ariaLabel"> 
User ID: <input type="text" id="asdfg-user_id" /> 
    </label> 
    <br> 
    <label for="password" id="password-ariaLabel"> 
Password: <input type="password" id="password" /> 
    </label> 
    <br> 
<label for="password" id="password-ariaLabel"> 
Department: <input type="text" id="department" /> 
    </label> 
    <br> 
    <fieldset id="interestInfo"> 
     <legend>Subject </legend> 
     <div> 
      <div id="interests"></div> 
      <div> 
       <div class="row"> 
        <input id="chk_Subject_1_lbl" name="chk_Subject[]" 
          type="checkbox" 
          value="on"/> 
        <span> 
         <label for="chk_Subject_1" id="AreaOfInterest_1-ariaLabel" >Math</label> 
        </span> 
       </div> 
       <div class="row"> 
        <input id="chk_Subject_2_lbl" name="chk_Subject[]" 
          type="checkbox" 
          value="on"/> 
        <span> 
         <label for="chk_Subject_2" id="AreaOfInterest_2-ariaLabel" >Chemistry</label> 
        </span> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
<input type="submit" id="submit" value="Submit" /> 
</form>