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
Allgemeine Tags in XHTML
Was sind XHTML-Tags? XHTML-Tag-Elemente sind die ...
Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux
Vorbereitung 1. Starten Sie die virtuelle Maschin...
Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu
Melden Sie sich zuerst bei MySQL an Shell> MyS...
So ändern Sie die Zeitzone und die Uhrzeit im Ubuntu-System
Auf einem Linux-Computer gibt es zwei Zeitzonen: ...
Detaillierte Erklärung von Abfragebeispielen innerhalb von Unterabfragen in MySql
Wo liegt meine Heimatstadt, wenn ich nach Nordwes...
Detaillierte Erläuterung der Konfigurationsmethode des Vue-Anforderungs-Interceptors
Befolgen Sie die nachstehenden Schritte 1. Inhalt...
So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu
Vor einiger Zeit stieß ich während der Entwicklun...
Installieren von Alibaba Cloud Server mit Docker und die Fallstricke bei der Installation in einer virtuellen Maschine (Zusammenfassung der Probleme)
Docker-Installation (Alibaba Cloud Server) Offizi...
Lösung für das Problem ungültiger Breiteneinstellungen für Label und Span
Standardmäßig ist die Einstellung der Breite für B...
JSON (JavaScript Object Notation) in einem Artikel verstehen
Inhaltsverzeichnis JSON wird angezeigt JSON-Struk...
Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI
Inhaltsverzeichnis Anforderungsbeschreibung Probl...
Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert
Nachdem die Tabellenbreite auf der Seite auf width...
Zusammenfassung des Wissens zu CSS-Injection
Moderne Browser erlauben nicht mehr, JavaScript i...
So erstellen Sie schnell Ihren eigenen Server - ausführliches Tutorial (Java-Umgebung)
1. Kauf des Servers 1. Ich habe mich für den Serv...
So verwenden Sie wangEditor in Vue und erhalten durch Echo von Daten den Fokus
Bei der Hintergrundverwaltung von Projekten werde...