Webdesign-TabIndex-Element
|
TabIndex dient zum Drücken der Tabulatortaste, um nacheinander die definierten TabIndex-Elemente abzurufen und den Fokus zwischen den einzelnen Elementen zu setzen. Jeder, der schon einmal ein Formular erstellt oder ausgefüllt hat, weiß, dass er mit der Tabulatortaste nacheinander den Fokus auf alle Eingaben setzen kann. Dieses Element kann tatsächlich geändert werden, z. B. wenn Sie nicht möchten, dass es abgerufen wird, oder wenn Sie die Reihenfolge ändern möchten, in der es abgerufen wird. Beim Ausfüllen eines Formulars (Registrierung, Login oder anderes) verwenden viele Benutzer nicht die Maus, sondern drücken direkt die Tabulatortaste, um zum nächsten Textfeld zu springen, warten, bis alles ausgefüllt ist, und senden es dann ab. Dies ist eine sehr gute und praktische Funktion. Meine persönliche Angewohnheit ist, dass ich nach dem Ausfüllen aller Informationen normalerweise mit der Maus auf die Schaltfläche „Senden“ klicke und nicht möchte, dass die Tabulatortaste den Fokus auf die Schaltfläche springen lässt. Ich stelle jedoch selten fest, dass die Tabulatortaste nicht zur Schaltfläche springt. Ich weiß nicht, ob es an meiner persönlichen Angewohnheit liegt-_-!!! Wenn Sie nicht möchten, dass etwas den Fokus erhält, können Sie „tabindex=-x“ festlegen, um den Wert von „tabindex“ negativ zu machen, sodass „Tab“ es direkt überspringt. Hier ist ein Beispiel mit einem einfachen Formular: Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern Code kopieren Der Code lautet wie folgt:<Formularmethode="Post" Aktion="#"> <p><label for="t1">Das erste Drücken der Tabulatortaste setzt den Fokus auf das Textfeld </label><input type="text" id="t1" tabindex="1" /></p> <p><label for="t2">Beim zweiten Drücken der Tabulatortaste wird der Fokus auf das Textfeld gesetzt. </label><input type="text" id="t2" tabindex="2" /></p> <p><label for="t3">Drittens drücken wir die Tabulatortaste, um den Fokus auf das Textfeld zu setzen. </label><input type="text" id="t3" tabindex="3" /></p> <p>Tabulatortaste drücken, Textfeld nicht fokussiert <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p> </form> Bei Verwendung der Tabulatortaste wird die Reihenfolge, in der der Fokus erworben wird, nach dem Wert von Tabindex sortiert. Im obigen Beispiel werden t1, t2 und t3 nacheinander fokussiert. Bei t4 erhält t4 nicht den Fokus, da der Wert von TabIndex -1 ist, sondern springt direkt zum nächsten Element, das den Fokus erhält. Die TabIndex-Werte von t1, t2, t3 und t4 können je nach tatsächlichem Bedarf beliebig geändert werden, und der Tab-Fokus wird von kleinen bis zu großen Werten erhalten. Hierzu wird TabIndex verwendet. . . |
<<: WeChat-Applet implementiert Suchfeldfunktion
>>: Detaillierte Erläuterung der MySQL-Indexauswahl und -Optimierung
Artikel empfehlen
So rufen Sie das VMware Esxi-Root-Passwort erfolgreich ab, wenn Sie es vergessen haben
Bereiten Sie eine CentOS6-Installationsdiskette (...
Vue implementiert die Drag & Drop-Funktion für Bilder
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung der Codeoptimierung zur Leistungsoptimierung von Vue2.x-Projekten
Inhaltsverzeichnis 1 Verwendung von v-if und v-sh...
Beispiele für die korrekte Verwendung von Karten in WeChat-Miniprogrammen
Inhaltsverzeichnis Vorwort 1. Vorbereitung 2. Tat...
Schritte zum Verpacken und Freigeben des Vue-Projekts
Inhaltsverzeichnis 1. Übergang von der Entwicklun...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Windows
In diesem Artikel finden Sie das grafische Tutori...
Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur
Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...
Docker-Grundlagen
Vorwort: Docker ist eine Open-Source-Anwendungsco...
So verwenden Sie den Yum-Befehl
1. Einführung in yum Yum (vollständiger Name Yell...
Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse
Warum sind die von Ihnen geschriebenen SQL-Abfrag...
Detailliertes Installationstutorial für die MySQL 5.6.36-Version für Windows x64
1. Zielumgebung Windows 7 64-bit 2. Materialien (...
Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und eine kurze Diskussion über Event Loop
Inhaltsverzeichnis 1. Warum ist JavaScript Single...
Docker startet das Elasticsearch-Image und behebt den Fehler nach dem Mounten des Verzeichnisses
Ein ES-Image vom Docker-Hub heruntergeladen, Vers...
Beispielanalyse für die Farbabstimmung einer Webseite: Analyse der Webseite mit grüner Farbabstimmung
<br />Grün liegt zwischen Gelb und Blau (kal...
So erstellen Sie ein React-Projekt mit Vite
Inhaltsverzeichnis Vorwort Erstellen Sie ein Vite...