Kommentar: Der Browser hat viele HTML5 -Funktionen eingeführt. Einer meiner Favoriten ist es, das Platzhalterattribut für das Eingabeelement einzuführen. Das Platzhalterattribut zeigt den Handbuchtext an, bis das Eingabefokus den Eingabefokus erhält. Wenn der Benutzer den Inhalt eingibt, wird der Handbuch -Inhalt automatisch versteckt.
Originaladresse: Das Platzhalterattribut von HTML5Demo -Adresse: Platzhalter
Originaldatum: 9. August 2010
Übersetzungsdatum: 6. August 2013
Der Browser führt viele HTML5 -Funktionen ein: Einige basieren auf HTML, einige befinden sich in Form von JavaScript -APIs, aber alle sind sehr nützlich. Einer meiner Favoriten ist die Einführung des Platzhalterattributs für das Eingabeelement.
In der Platzhaltereigenschaft wird der Handbuchtext angezeigt, bis das Eingabefokus den Eingangsfokus erhält. Wenn der Benutzer den Inhalt eingibt, wird der Handbuch -Inhalt automatisch versteckt. Sie haben diese Technik auf jeden Fall tausende Male in JavaScript gesehen, aber die native Unterstützung von HTML5 ist im Allgemeinen besser.
Der HTML -Code lautet wie folgt:
<Eingabe type = "text" placeholder = "Bitte geben Sie die permanente Adresse ein ...">
Alles, was Sie tun müssen, ist eine Platzhalterdomäne und einige geführte Textinhalte hinzuzufügen und keine zusätzlichen JavaScript -Skripte zu benötigen, um diesen Effekt zu erzielen. Ist es nicht großartig?
Unterstützung für Platzhalter
(Beachten Sie, dass dies ein Artikel von 2010 ist. Bisher, im Jahr 2013, sollten Mainstream -Browser ihn unterstützen sollen.)
Da Platzhalter ein neues Merkmal ist, ist es erforderlich, den Browserunterstützung zu testen. Der JS -Code lautet wie folgt:
// Erstellen Sie ein Eingabeelement in JS und bestimmen Sie, ob das Element ein Attribut namens Platzhalter hat
// Wenn der Browser es unterstützt, existiert diese Eigenschaft in der in JS verwiesenen DOM
Funktion hasplaceholdersupport () {
var input = document.createelement ('Eingabe');
return ('Platzhalter' in der Input);
}
Wenn der Browser die Platzhalterfunktion nicht unterstützt, benötigen Sie eine Fallback -Strategie, um sie zu handhaben, z. B. Mootools, Dojo oder andere JavaScript -Tools. (Jetzt kann Dojo weniger verwendet werden, und mehr in China sind JQuery und Extjs.)
/* JQuery Code, denken Sie natürlich daran, die jQuery Library vorzustellen*/
$ (function () {
if (! hasplaceholdersupport ()) {
// Erhalten Sie das Adresselement
var $ address = $ ("input [name = 'address']");
Platzhalter = $ address.attr ("Platzhalter");
// Fokusereignis binden
$ adress.bind ('Focus', function () {
if (placeholder == $ address.val ()) {
$ address.val ('');
}
});
// Lost Focus Event
$ address.bind ('Blur', function () {
if ('' == $ address.val ()) {
$ address.val (Platzhalter);
}
});
}
});
Der Platzhalter ist ein weiteres großartiges Eigentum für den Browser, um JS -Snippets zu ersetzen. Sie können sogar den Platzhalterstil von HTML5 bearbeiten.
Alle Codes sind wie folgt:
<! DocType html>
<html>
<kopf>
<title> HTML5 Placeholder Attribut Demonstration </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "original = http: //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<Script>
// Erstellen Sie ein Eingabeelement in JS und bestimmen Sie, ob das Element ein Attribut namens Platzhalter hat
// Wenn der Browser es unterstützt, existiert diese Eigenschaft in der in JS verwiesenen DOM
Funktion hasplaceholdersupport () {
var input = document.createelement ('Eingabe');
return ('Platzhalter' in der Input);
}
/* JQuery Code, denken Sie natürlich daran, die jQuery Library vorzustellen*/
$ (function () {
if (! hasplaceholdersupport ()) {
// Erhalten Sie das Adresselement
var $ address = $ ("input [name = 'address']");
Platzhalter = $ address.attr ("Platzhalter");
// Fokusereignis binden
$ adress.bind ('Focus', function () {
if (placeholder == $ address.val ()) {
$ address.val ('');
}
});
// Lost Focus Event
$ address.bind ('Blur', function () {
if ('' == $ address.val ()) {
$ address.val (Platzhalter);
}
});
}
});
</script>
</head>
<body>
<div>
<form method = "post" action = "">
<Eingabe type = "text" placeholder = "Bitte geben Sie die permanente Adresse ein ...">
<input type = "surug" value = "test">
</form>
</div>
</body>
</html>