Analyse und Lösungen für Probleme bei der Verwendung von Label-Tags
|
Ich habe kürzlich bei einer bestimmten Aufgabe das Label-Tag verwendet. Da ich das Label-Tag vorher selten verwendet habe, stieß ich auf ein sehr merkwürdiges Problem. Wo liegt das Problem? Schauen wir uns einen Effekt an Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern Der Zweck dieser Demo besteht darin, zu überprüfen, ob der vom Benutzer eingegebene Benutzername und das Passwort beim Klicken auf die Anmeldeschaltfläche gültig sind. Wenn sie nicht gültig sind, wird unter dem Benutzernamen-Eingabefeld eine Fehlermeldung angezeigt. Die Elemente, die Fehlerinformationen ausgeben, sollen mithilfe von Labels umgesetzt werden. Öffnen Sie die Demoseite, indem Sie den Code ausführen, und klicken Sie auf die Schaltfläche „Anmelden“, um zu sehen, welche Änderungen auftreten. Wenn Sie Firefox, Chrome oder IE9+ verwenden, wird Ihnen nach dem Klicken auf die Anmeldeschaltfläche die Meldung „Falscher Benutzername“ angezeigt, was das gewünschte Ergebnis ist. Wenn Sie IE6, 7 oder 8 verwenden, wie wäre es, wenn Sie nachsehen, welche Änderungen auftreten werden? Zu diesem Zeitpunkt werden Sie feststellen, dass die Seite keine Informationen anzeigt. Öffnen Sie die Entwicklertools und sehen Sie sich das Steuerelement an. Zu diesem Zeitpunkt werden Sie feststellen, dass die Fehlermeldung „SCRIPT600: unbekannter Laufzeitfehler“ angezeigt wird. Als ich auf dieses Problem stieß, probierte ich sowohl innerText- als auch innerHTML-Methoden aus und stellte fest, dass beide Methoden denselben Fehler meldeten. Ich dachte, die Verwendung sei falsch, also schaute ich bei w3cschool nach und stellte fest, dass dort nicht stand, dass innerText und innerHTML nicht unterstützt würden. Warum tritt dieser Fehler in IE6, 7 und 8 auf, während Firefox, Chrome und IE9+ (andere Browser wurden nicht ausprobiert) normal laufen? Aufmerksame Benutzer erkennen das Problem möglicherweise sofort. Der Starttag des Elements, das „Falscher Benutzername“ anzeigt, wird als „lable“ statt als „label“ geschrieben. Aber ich habe dieses Problem damals nicht bemerkt. Ich dachte immer, es gäbe ein Problem mit der Art und Weise, wie das Label-Tag verwendet wurde. Warum die JS-Engines von IE6, 7 und 8 Fehler aufweisen, wenn die innerText- und innerHTMl-Attribute solcher Elemente mit falschen Tag-Namen verwendet werden, während bei Firefox, Chrome und IE9+ keine Fehler auftreten, ist mir nicht ganz klar. Wenn jemand mehr darüber weiß, kann er es mir bitte erklären. Dieses Problem liegt eigentlich eher auf niedriger Ebene vor. Der Etikettenname wurde falsch geschrieben. Aber damals ist mir das nicht aufgefallen. Ich habe das Problem erst später bei genauer Untersuchung entdeckt und es deshalb trotzdem aufgezeichnet. |
<<: Detaillierter Prozess der Vue-Front-End-Verpackung
>>: Austausch von Ideen zur Verarbeitung von Millionen von Daten in einer einzigen MySQL-Tabelle
Artikel empfehlen
Erläuterung zur Verwendung von „if“-Beurteilungsbedingungen in Summen- und Zählfunktionen bei der Verwendung von SQL-Anweisungen zum Sammeln von Daten
Lassen Sie mich zunächst ein Beispiel geben (wenn...
Detaillierte Erläuterung zum Erstellen und Aufrufen von gespeicherten MySQL-Prozeduren
Inhaltsverzeichnis Vorwort Gespeicherte Prozedur:...
So installieren Sie die Linux-Onlinesoftware gcc online
Befehle zur Linux-Onlineinstallation: yum install...
Verstehen Sie das elastische CSS3 FlexBox-Layout in 10 Minuten
Grundlegende Einführung Merkmale Flexbox ist ein ...
Teilen Sie 5 JS-High-Order-Funktionen
Inhaltsverzeichnis 1. Einleitung 2. Rekursion 3. ...
Zusammenfassung der Ereignisse, die Browser registrieren können
HTML-Ereignisliste Allgemeine Ereignisse: onClick ...
So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis
Im vorherigen Artikel habe ich das ausführliche T...
Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click
Inhaltsverzeichnis Warum wird addEventListener be...
Analyse des Ereignisschleifenmechanismus von js
Vorwort Wie wir alle wissen, ist JavaScript im Ke...
Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)
Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...
Verwendung des Linux-Befehls ifconfig
1. Befehlseinführung Der Befehl ifconfig (Netzwer...
Detaillierte Erläuterung der Hinweise zum Flex- und Positionskompatibilitäts-Mining
Heute hatte ich etwas Freizeit, um eine Website f...
HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf
<br />Die Kopfzeile bezieht sich auf die ers...
Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)
Hintergrund Suchen Sie in der Suchmaschine nach d...
Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns
Wie funktioniert „Adaptives Webdesign“? Eigentlich...