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

Konfliktlösung bei gleichzeitiger Verwendung von Laufschrift und Flash auf einer Seite

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

Konfliktlösung bei gleichzeitiger Verwendung von Laufschrift und Flash auf einer Seite

Methode zum dynamischen Laden von Geojson basierend auf Vue+Openlayer

Detaillierte Erläuterung der Hinweise zum Flex- und Positionskompatibilitäts-Mining

8 Tipps für Vue, die Sie nach dem Lesen lernen werden

Praxis der Vue Global Custom-Anweisung Modal Drag

Implementierungscode für die nahtlose Verbindung des Div-Bildlaufbands

Detaillierte Erläuterung der JavaScript-Closure-Probleme

So konfigurieren Sie eine JDK-Umgebung unter Linux

Detailliertes Tutorial zur Installation der entpackten Version von mysql5.7.28 winx64 unter Windows

So verwalten Sie Benutzer und Gruppen beim Ausführen von Docker

Artikel empfehlen

HTML-Tabellen-Tag-Tutorial (26): Zellen-Tag

Einige Tipps zur richtigen Verwendung des HTML-Titelattributs

Analyse des HTML-Schreibstils und Gründe erfahrener Leute

Reiner CSS-Beispielcode für Meteorschauer-Hintergrund

Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren

So berechnen Sie die Bildrate FPS von Webanimationen

Kenntnisse zur Überwachung der MySQL-Indexnutzung (es lohnt sich, sie zu erwerben!)

Allgemeine Vorgänge des Web-Frontends (einschließlich JS/HTML/CSS und anderer Wissensaspekte)

So führen Sie das Springboot-Projekt im Docker aus

Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung

Zusammenfassung der grundlegenden allgemeinen MySQL-Befehle

Implementierung von React-Loop-Daten (Liste)

Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache

So installieren Sie die IonCube-Erweiterung mit Pagoda

Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren