HTML-Tutorial: Verwenden Sie tabIndex, um die Webseitennavigation einfach zu implementieren

Als ich kürzlich Formulardaten auf einer Website eingegeben habe, habe ich eine Spalte ausgefüllt und auf die [Tab]-Taste geklickt, um zur nächsten Spalte zu gelangen. Als ich nachgeschlagen habe, war ich überrascht, dass der Cursor zu einer anderen sprang Spalte am Ende der Seite in einer Spalte. Ich habe den Cursor mit der Maus in das richtige Textfeld bewegt, aber schon bald trat das Problem mit der [Tab]-Taste erneut auf. Diese Situation brachte mich dazu, einen Blick auf das Seitendesign zu werfen und darauf, wie die tabIndex-Eigenschaft die Navigation über die Tastatur unterstützt.

Zugriff auf Elemente über die [Tab]-Taste

Mit dem HTML-DOM-Attribut tabIndex können Sie die Tab-Reihenfolge eines HTML-Elements festlegen oder zurückgeben . IE
4.0 war der erste, der diese Funktion unterstützte. Zunächst werden nur Elemente unterstützt, die wirklich über die [Tab]-Taste erreichbar sind, wie z. B. Eingabefelder, Links usw. Heutzutage unterstützen alle Webbrowser diese Funktion sowie alle auf der Seite angezeigten Elemente. Bevor Sie es anwenden, können Sie auf die HTML-Spezifikation doppelklicken, um sicherzustellen, dass ein Element diese Funktion unterstützt.

　tabIndex-Eigenschaft

Das Anwenden der tabIndex-Eigenschaft ist ein einfacher und unkomplizierter Vorgang. Der folgende HTML-Quellcode weist beispielsweise dem Eingabefeld, das die erste Spalte in der Tab-Reihenfolge darstellt, den tabIndex-Wert 1 zu:

　

Wenn die [Tab]-Taste anfänglich ausgewählt ist, bewegen Webseiten mit diesem Eingabefeld den Cursor zu das Feld „Vorname“.

Beim Zuweisen von Werten zum tabIndex-Attribut sollten Sie auf mehrere Punkte achten. Hier einige Zuweisungsregeln: Elemente mit einem tabIndex von 0 werden nach ihrem Quellcode (oder Standardseitenverhalten) sortiert.

Ein tabIndex-Wert größer als 0 legt die Tab-Reihenfolge fest. Alle Elemente mit einem positiven tabIndex-Wert erscheinen vor allen Elementen mit einem tabIndex-Wert von 0.

Wenn Sie einen Fehler machen und mehreren Elementen denselben tabIndex zuweisen, werden diese wie andere Elemente mit einem tabIndex von 0 verarbeitet.

Weisen Sie tabIndex den Wert -1 zu, dann wird dieses Element bei Verwendung der [Tab]-Taste ignoriert. Hinweis: Wenn ein Wert von -1 verwendet wird, sind die Ereignisse onfocus und onblur weiterhin aktiviert.

Der Wert von tabIndex kann eine beliebige Zahl zwischen 0 und 32767 sein.

Der Beispiel-HTML-Code in Listing A weist jedem Element auf der Seite einen tabIndex-Wert zu. Eingabefelder und DIV-Tags enthalten das tabIndex-Attribut, das es Benutzern ermöglicht, Seitenelemente mithilfe der Tastatur durchzugehen. (Das DIV-Tag liefert nicht viele Informationen zum Erhalten des Fokus, aber ich wollte die Verwendung von tabIndex mit Nicht-Eingabeelementen veranschaulichen.) Schaltflächen mit dem Wert -1 wird ein Wert zugewiesen und sie werden ignoriert, wenn das [Tab ]-Taste wird angewendet.

Wenn das Eingabeelement voll ist (die maximale Länge erreicht), können Sie ein kleines JavaScript-Skript hinzufügen, um die automatische Positionierungsfunktion zu implementieren. Dies ist eine Grundfunktion. Sehen wir uns an, wie das Skript ihre Funktion implementiert:

　function checkLen(x,y) {
if
(y.length==x.maxLength ) {
var next=x.tabIndex
if (next <
document.getElementById("frmTest").length)
{
document.getElementById("frmTest").elements [next -1].focus()
} }
}

　Diese Funktion akzeptiert zwei Variablen. Die erste Variable ist das Eingabefeld und die zweite Variable enthält den Wert des Feldes. Und vergleichen Sie die Länge der Spalte mit der maximal zulässigen Länge der Spalte. Wenn sie gleich sind (d. h. die Spalte ist voll), wird der Wert von tabIndex aus der Spalte gelesen; ist der Wert kleiner als die maximale Länge, wird der Fokus auf die nächste Spalte verschoben.

Diese Funktion weist dem Onkeyup-Ereignis jeder Spalte einen Wert zu. Daher muss diese Funktion jedes Mal verwendet werden, wenn ein Wert in die Spalte eingegeben wird, um zu überprüfen, ob er die maximale Länge erreicht aufgerufen werden. Wenn der Maximalwert erreicht ist, bewegt sich der Cursor in Tab-Reihenfolge zur nächsten Spalte. Der Quellcode in Listing B fügt diese Funktion zum obigen Beispiel hinzu.

Barrierefreiheit verbessern

Die Angabe von tabIndex für Elemente kann Benutzern, die häufig Tastaturen verwenden, dabei helfen, bequemer auf die Netzwerkschnittstelle zuzugreifen; Auch Nicht-Standard-Benutzer wie PDAs, Mobiltelefone und Bildschirmlesegeräte, die von Menschen mit Behinderungen verwendet werden, profitieren. Alles, was die Möglichkeiten einer Anwendung erweitert, ist von Vorteil.

Ein Kinderspiel. Sie verbringen möglicherweise viel Zeit damit, Webformulare so zu gestalten, dass sie optisch ansprechend sind und von Back-End-Serverkomponenten korrekt verarbeitet werden können. Möglicherweise haben Sie es jedoch versäumt, es mit nicht standardmäßigen Technologien oder Browsern zu testen. Ein typisches Beispiel besteht darin, die Maus aufzugeben und sich beim Navigieren im Formular auf die Tastatur zu verlassen. Der HTML-Standard enthält das tabIndex-Attribut, mit dem Sie steuern können, auf welche Elemente über die [Tab]-Taste zugegriffen wird.

Das Obige ist der Inhalt des HTML-Tutorials: Verwenden Sie tabIndex, um die Webnavigation einfach zu implementieren. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php .cn)!