Heim > Artikel > Web-Frontend > Analyse und Lösungen für Probleme, die bei der Verwendung von Label-Tags_HTML/Xhtml_Webseitenproduktion auftreten

Analyse und Lösungen für Probleme, die bei der Verwendung von Label-Tags_HTML/Xhtml_Webseitenproduktion auftreten

WBOYOriginal: 2016-05-16 16:40:071758Durchsuche

Ich habe kürzlich bei der Herstellung von Dingen Etiketten-Tags verwendet. Da Etiketten-Tags bisher selten verwendet wurden, bin ich auf ein sehr seltsames Problem gestoßen. Was ist das Problem? Sehen wir uns unten einen Effekt an

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>HTML-Label-Tag-Lernen nach Typeof</title>
<style type="text/css">
html, Körper {
Rand: 0;
Polsterung: 0;
}
.title {
Rand: 10px;
}
.login-item, .login-button {
Rand: 20px;
Höhe: 30px;
}
.clearfix {
klar: beides;
Inhalt: "";
Anzeige: Block;
}
.login-item label {
schweben: links;
Breite: 70px;
}
.login-item .text {
Höhe: 18px;
Breite: 200px;
schweben: links;
}
</style>
</head>
<Körper>
<div class="title">
Bei der Verwendung von Etikettenetiketten treten Probleme auf
</div>
<div class="login-item clearfix">
<label for="username">Benutzername: </label>
<input type="text" class="text" id="username" name="username" />
<lable id="J_usernameError"></label>
</div>
<div class="login-item clearfix">
<label for="password">Passwort  code:</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="Login" id="J_submitLogin" />
</div>
<script>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = 'Benutzernamenfehler';
};
</script>
</body>
</html>

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen

Der Zweck dieser Demo besteht darin, den Benutzer zu überprüfen, wenn er auf die Anmeldeschaltfläche klickt Überprüfen Sie, ob der eingegebene Benutzername und das Passwort zulässig sind. Andernfalls wird eine Fehlermeldung unter dem Eingabefeld für den Benutzernamen angezeigt.
Das Element, das die Fehlermeldung auslöst, soll mit Label implementiert werden.

Öffnen Sie die Demoseite, indem Sie den Code ausführen, klicken Sie auf die Anmeldeschaltfläche und sehen Sie, was passiert. Wenn Sie Firefox, Chrome oder IE9 verwenden, werden Sie nach dem Klicken auf die Anmeldeschaltfläche mit „Falscher Benutzername“ gefragt, was das gewünschte Ergebnis ist. Wenn Sie IE6, 7 oder 8 verwenden, wie können Sie überprüfen, ob es Änderungen gibt? Zu diesem Zeitpunkt werden Sie feststellen, dass auf der Seite keine Informationen abgefragt werden. Öffnen Sie die Entwicklertools und sehen Sie sich die Steuerelemente an. Zu diesem Zeitpunkt wird die Fehlermeldung „SCRIPT600: Unbekannter Laufzeitfehler“ angezeigt. Als ich auf dieses Problem stieß, habe ich zwei Methoden ausprobiert, innerText und innerHTML, und festgestellt, dass solche Fehler gemeldet wurden. Ich dachte, es sei die falsche Art, es zu verwenden. Ich habe es auf w3cschool überprüft und festgestellt, dass innerText nicht angezeigt wurde und innerHTML werden nicht unterstützt.

Warum wird ein solcher Fehler in IE6, 7 und 8 angezeigt, aber Firefox, Chrome und IE9 (andere Browser wurden nicht ausprobiert) funktionieren normal. Aufmerksame Leute erkennen möglicherweise sofort, wo das Problem liegt. Für das Element, das „falscher Benutzername“ anzeigt, wird das Start-Tag als „lable“ statt als label geschrieben. Aber ich habe dieses Problem damals nicht bemerkt. Ich dachte immer, es sei ein Problem mit der Art und Weise, wie das Label verwendet wurde. Was den Grund betrifft, warum die JS-Engine von IE6, 7 und 8 die Attribute innerText und innerHTMl von Elementen bedienen würde mit falschen Labelnamen tritt ein Fehler auf, aber es gibt keinen Fehler in Firefox, Chrome und IE9. Wenn es Freunde gibt, die mehr darüber wissen, erklären Sie es bitte.
Dieses Problem ist eigentlich recht untergeordnet. Ich habe den Labelnamen falsch geschrieben. Aber ich habe es damals noch nicht bemerkt, als ich dieses Problem nach sorgfältiger Untersuchung entdeckte, also beschloss ich, es aufzuzeichnen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Diskussion über Stilanpassungs- und Browserkompatibilitätsprobleme bei der Erstellung von Eingabeelementen [type="file"]_HTML/Xhtml_WebseitenNächster Artikel：Diskussion über Stilanpassungs- und Browserkompatibilitätsprobleme bei der Erstellung von Eingabeelementen [type="file"]_HTML/Xhtml_Webseiten

In Verbindung stehende Artikel

Mehr sehen