Wie mache ich ein <span> Element zu einem regelmäßigen Tabstopp innerhalb eines Formulars?

Question

Ich habe ein Formular-Steuerelement, das als Behälter verwendet (siehe das Ja/Nein toggler unten)

Hier ist der Code für die:

<span class="toggle"> 
    <i>Yes</i> 
    <i>No</i> 
    <input type="hidden" name="toggle-value" value="0"> 
</span> 

Meine CSS nicht relevant für das ist Frage, aber es ist für das Verständnis meiner Kontrolle eingeschlossen:

.toggle { width:auto; height: 20px; display: inline-block; position: relative; cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;} 
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; } 
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; } 
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; } 
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */ 
.toggle.on i:last-child { z-index: -1; } 
.toggle.off i:first-child { z-index: -1; } 
.toggle.off i:last-child { z-index: 1; } 
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */ 
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */ 

und der JS, dass es alle Arbeit macht:

.on('click', '.toggle', function(){ 
    var input = $(this).next('input'); 
     if(input.val() == 1) { 
      $(this).removeClass('on').addClass('off'); 
      input.val(0).change(); 
     } else { 
      $(this).removeClass('off').addClass('on'); 
      input.val(1).change(); 
     } 
} 

Das Problem ist, dass ich dies für Dateneingabe alle über meine Anwendung mit bin. Wolltest du schon immer NICHT die Maus benutzen, wenn du viele Daten eingibst? Ja ich auch. Also drückst du TAB und ein Toggle wie dieser sollte auf die Leertaste reagieren. Aber da es nur ein Element ist, wird es insgesamt übersprungen.

Ich hoffe, jemand kann mir helfen, die Frage zu lösen "wie zum Teufel mache ich dies ein Tabstopp und in der richtigen Reihenfolge"?

============== EDIT: HIER IST MEIN AKTUALISIERT JQUERY CODE mit der Lösung:

$('.toggle').click(function(){ 
    var input = $(this).next('input'); 
     if(input.val() == 1) { 
      $(this).removeClass('on').addClass('off'); 
      input.val(0).change(); 
     } else { 
      $(this).removeClass('off').addClass('on'); 
      input.val(1).change(); 
     } 
}).focus(function() { 
    $(this).bind('keydown', 'space', function(e){ 
     $(this).trigger('click') 
     e.preventDefault(); 
    }); 

}).blur(function() { 
    $(this).unbind('keydown'); 

}).attr('tabIndex', 0); 

Answer 1

Versuchen Sie, Ihren Tabindex auf 0 zu setzen, auf die Nicht-Anker-Elemente, die Sie "tabbable" machen möchten. Zum Beispiel tabindex="0". Auf diese Weise werden Sie sich nicht mit der Tab-Reihenfolge herumschlagen oder Tabindexes überall herumwerfen müssen.

Answer 2

Blick in das Attribut html tabindex. Grundsätzlich sollten Sie tabindex auf jeden Eingang, den Sie fokussieren möchten, über die Tabulatortaste einstellen können. Starten Sie die erste eine 1 und zählen Sie einfach aufwärts für jeden Eingang. Wenn Sie auch über die Tabulatortaste eine Eingabe außerhalb des Fokus vornehmen möchten, stellen Sie tabindex auf -1.