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

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML label tag 学习by Typeof</title> <style type="text/css"> html, body { margin: 0; padding: 0; } .title { margin: 10px; } .login-item, .login-button { margin: 20px; height: 30px; } .clearfix { clear: both; content: ""; display: block; } .login-item label { float: left; width: 70px; } .login-item .text { height: 18px; width: 200px; float: left; } </style> </head> <body> <div class="title"> label标签使用过程中遇到的问题</div> <div class="login-item clearfix"> <label for="username">用户名：</label> <input type="text" class="text" id="username" name="username" /> <lable id="J_usernameError"></label> </div> <div class="login-item clearfix"> <label for="password">密&nbsp;&nbsp;码：</label> <input type="text" class="text" id="password" name="username" /> <label id="J_passwordError"></label> </div> <div class="login-button clearfix"> <input type="submit" value="登录" id="J_submitLogin" /> </div> <script> document.getElementById('J_submitLogin').onclick = function() { var usernameError = document.getElementById('J_usernameError'); usernameError.innerHTML = '用户名错误'; }; </script> </body> </html>

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

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Analyse und Lösungen für Probleme bei der Verwendung von Label-Tags

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Ein Debugging-Prozessprotokoll für chinesische Zeichentrickfiguren in der Startkonsole des Tomcat-Quellcodes

Analyse von Multithread-Programmierbeispielen unter Linux

So erlauben Sie allen Hosts den Zugriff auf MySQL

Detaillierte Erläuterung der Verwendung der Cloud-native-Technologie Kubernetes Scheduling Unit Pod

Setzen Sie das Attribut „contenteditable“, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen).

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Detaillierte Erläuterung der drei Möglichkeiten zum Schneiden von Catalina.out-Protokollen in Tomcat

So erstellen Sie einen DHCP-Server in Linux

Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL

Artikel empfehlen

Zusammenfassung der unbekannten Verwendung von "!" in Linux

MySQL-Gruppierungsmethode für die Gruppierungssequenz einzelner Wörter und die Gruppierung mehrerer Felder

Fallerklärung für den Nginx-Reverse-Proxy zu Go-FastDFS

Eine Lösung für einen Fehler in IE6 mit jquery-multiselect

JavaScript verwendet häufig Array-Deduplizierung tatsächliche Kampf Quellcode

So konfigurieren Sie SSL für den Koa2-Dienst

Implementierung der Funktion der kreisförmigen prozentualen Fortschrittsbalkenkomponente von Vue

Beispiele für optimistisches und pessimistisches Sperren in MySQL

Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes

Mysql GTID Mha-Konfigurationsmethode

vue realisiert die Anpassung der Spaltenbreite von el-table perfekt

JavaScript entfernt unnötige Eigenschaften eines Objekts

Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix

Ändern Sie den Stil des HTML-Textkörpers in JS

Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3