Wie mache ich eine Element einen regulären Tabstopp innerhalb eines Formulars?

Ich habe ein Formularsteuerelement erstellt, das als Container verwendet wird (siehe Ja/Nein-Umschalter unten).

Hier ist der Code dafür:

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

Mein CSS ist für die Frage nicht relevant, aber zum Verständnis meiner Kontrolle enthalten:

.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 das JS, das alles zum Laufen bringt:

.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 in meiner gesamten Anwendung zur Dateneingabe verwende. Wollten Sie schon immer die Maus NICHT benutzen, wenn Sie viele Daten eingeben? Ja ich auch. Sie drücken also TAB und ein Umschalter wie dieser sollte auf die Leertaste reagieren. Da es sich jedoch nur um ein Element handelt, wird es stattdessen ganz übersprungen.

Ich hoffe, jemand kann mir helfen, die Frage zu lösen “wie zum Teufel mache ich das zu einem Tabstopp UND in der richtigen Reihenfolge“?

============== BEARBEITEN: HIER IST MEIN AKTUALISIERTER 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);

Versuchen Sie, Ihren Tabindex für die Nicht-Anker-Elemente, die Sie “tabbelbar” machen möchten, auf 0 zu setzen. Zum Beispiel tabindex="0". Auf diese Weise werden Sie nicht mit der Tab-Reihenfolge herumspielen oder überall Tabindizes werfen müssen.

Sehen Sie sich das html-Attribut an tabindex. Grundsätzlich sollte man das einstellen können tabindex auf jeden Eingang, den Sie über die Tabulatortaste fokussieren möchten. Beginnen Sie mit dem ersten a 1 und zählen Sie einfach für jede Eingabe aufwärts. Wenn Sie auch eine Eingabe aus dem Fokussieren über die Tabulatortaste nehmen möchten, stellen Sie die ein tabindex zu -1.