2009-01-05 10 views
15

Gibt es eine gute Möglichkeit, in einem javascript onfocus() - Handler den Fokus auf das nächste Element in der Tabulatorreihenfolge zu trampolieren, ohne die ID des Elements, das als nächstes angezeigt werden soll, manuell einzugeben?Wie überspringe ich Einträge beim Tab-Tab ohne Tabindex?

Ich baute eine HTML-Datumsauswahl in Django/jQuery. Es ist eine Zeilenbearbeitung, gefolgt von einem Kalender-Symbol, das in einem Kalender erscheint. Ich möchte in der Lage sein, von der Linienbearbeitung zur nächsten Eingabe überzugehen, indem ich den Link für das Kalendersymbol überspringe. Ich meine, damit es ein verallgemeinertes Widget ist, also kann ich die ID von dem, was als nächstes kommt, nicht fest codieren und call .focus() aufrufen. Ich weiß, dass ich Tabindex-Attribute für alles einstellen kann, aber das ist mehr manuell als ich möchte. Auch, Iirc, das würde nicht verhindern, dass es den Fokus nimmt, es würde es nur am Ende der Tab-Reihenfolge setzen.

Antwort

2

Vielleicht:

$("#your-calendar-icon").focus(function() { 
    $(this).trigger("blur"); 
); 
+1

Der Fokus wird nicht übersprungen, es wird zurückgesetzt, so dass beim nächsten Drücken der Tabulatortaste das erste Element auf der Seite – wnbates

0

Verwenden Sie ein div um das Kalender-Symbol statt eines Link. Dann hängen Sie Ihre Kalenderereignisse an das div an. Standardmäßig ist das div kein Tabstopp.

2

oder:

$("#your-calendar-icon").focus(function() { 
    $(somethingElse).trigger("focus"); 
}); 
0

Wenn es immer die Eingabe nach dem Kalender sein würde, warum dann nicht:

$('#your-calendar-icon').focus(function() { 
    $(this).next('input').focus(); 
}); 

Persönlich würde ich sagen, wenn es ein Plugin wird, sollten Sie einfach das nächste Element eine Konfigurationsoption, die eine Standardeinstellung hat, und den Standard in den Dokumenten angeben.

27

Setze tabindex = "-1" für dieses Steuerelement und der Browser überspringt dieses Steuerelement vom Tabbing.

+1

Das funktioniert, aber es ist nicht gültig. Validatoren sind launisch. Gibt es einen einfachen Weg, um gültig zu sein? http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex. "Dieser Wert muss eine Zahl zwischen 0 und 32767 sein." – dfrankow

+5

Scheint mit mindestens FF10 und IE9 zu arbeiten. @drakrakow, sieht so aus, als wäre dies ein Defacto-Standard. Validierung verdammt sein ... – mlissner

+0

Ich mag diese Lösung :) – alemur

0

Wie @thetacom sagt, können Sie einfach einen anderen Elementtyp verwenden, einen, der keinen Fokus erhält. Wenn Sie weiterhin einige der Registerkarte Funktionalität behalten möchten, können Sie versuchen SkipOnTab.

SkipOnTab: Ein jQuery-Plugin, um ausgewählte Formularfelder von der Forward-Tab-Reihenfolge zu befreien.

Fügen Sie einfach data-skip-on-tab="true" dem Datumsauswahlsymbol (oder anderen Elementen/Containern) hinzu, die Sie überspringen möchten. Sie können immer noch klicken, um die Datumsauswahl zu aktivieren, oder mit shift - Registerkarte zurückkehren und die Eingabetaste verwenden.

Siehe the simple demo und the business case demo.

Verwandte Themen