Commentaire: Le navigateur a introduit de nombreuses fonctionnalités HTML5. L'un de mes favoris est d'introduire l'attribut d'espace réservé pour l'élément d'entrée. L'attribut de placement affiche le texte du guide jusqu'à ce que la zone d'entrée obtient la mise au point d'entrée. Lorsque l'utilisateur saisit le contenu, le contenu du guide sera automatiquement masqué.
Adresse d'origine: attribut d'espace réservé de HTML5Adresse de démonstration: espace réservé
Date d'origine: 9 août 2010
Date de traduction: 6 août 2013
Le navigateur présente de nombreuses fonctionnalités HTML5: certaines sont basées sur HTML, certaines sont sous la forme d'API JavaScript, mais elles sont toutes très utiles. L'un de mes favoris est l'introduction de l'attribut d'espace réservé pour l'élément d'entrée.
La propriété de placement affiche le texte du guide jusqu'à ce que la zone d'entrée obtient la mise au point d'entrée. Lorsque l'utilisateur saisit le contenu, le contenu du guide sera automatiquement masqué. Vous avez définitivement vu cette technique implémentée en JavaScript des milliers de fois, mais le support natif de HTML5 est généralement meilleur.
Le code HTML est le suivant:
<entrée type = "text" placeholder = "Veuillez saisir l'adresse permanente ...">
Tout ce que vous avez à faire est d'ajouter un domaine d'espace réservé et un contenu de texte guidé, et n'avez pas besoin de scripts JavaScript supplémentaires pour réaliser cet effet. N'est-ce pas génial?
Test Payholder Support
(Notez qu'il s'agit d'un article de 2010. Jusqu'à présent, en 2013, les navigateurs grand public auraient dû le soutenir.)
Étant donné que Payholder est une nouvelle fonctionnalité, il est nécessaire de tester la prise en charge du navigateur. Le code JS est le suivant:
// Créer un élément d'entrée dans JS et déterminer si l'élément a un attribut appelé placeholder
// Si le navigateur le prend en charge, cette propriété existera dans le DOM référencé en js
fonction hasplaceholdersupport () {
var input = Document.CreateElement ('Input');
return («placeholder» en entrée);
}
Si le navigateur ne prend pas en charge la fonctionnalité d'espace réservé, vous avez besoin d'une stratégie de secours pour le gérer, telles que Mootools, Dojo ou d'autres outils JavaScript. (Maintenant, le dojo peut être moins utilisé, et plus en Chine sont jquery et extjs.)
/ * JQuery Code, bien sûr, n'oubliez pas de présenter la bibliothèque JQuery * /
$ (function () {
if (! HasPlaceHoldersupport ()) {
// Obtenez l'élément d'adresse
var $ adresse = $ ("input [name = 'adresse']");
placeholder = $ adresse.attr ("placeholder");
// Binding Focus Event
$ adresse.bind ('focus', function () {
if (placeholder == $ adresse.val ()) {
$ adresse.val ('');
}
});
// Événement de focus perdu
$ adresse.bind ('blur', fonction () {
if ('' == $ adresse.val ()) {
$ adresse.val (placeholder);
}
});
}
});
Planholder est une autre excellente propriété supplémentaire pour le navigateur pour remplacer les extraits JS, vous pouvez même modifier le style d'espace réservé de HTML5.
Tous les codes sont les suivants:
<! Doctype html>
<html>
<adal>
<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>
<cript>
// Créer un élément d'entrée dans JS et déterminer si l'élément a un attribut appelé placeholder
// Si le navigateur le prend en charge, cette propriété existera dans le DOM référencé en js
fonction hasplaceholdersupport () {
var input = Document.CreateElement ('Input');
return («placeholder» en entrée);
}
/ * JQuery Code, bien sûr, n'oubliez pas de présenter la bibliothèque JQuery * /
$ (function () {
if (! HasPlaceHoldersupport ()) {
// Obtenez l'élément d'adresse
var $ adresse = $ ("input [name = 'adresse']");
placeholder = $ adresse.attr ("placeholder");
// Binding Focus Event
$ adresse.bind ('focus', function () {
if (placeholder == $ adresse.val ()) {
$ adresse.val ('');
}
});
// Événement de focus perdu
$ adresse.bind ('blur', fonction () {
if ('' == $ adresse.val ()) {
$ adresse.val (placeholder);
}
});
}
});
</cript>
</ head>
<body>
<div>
<form mode méthode = "post" action = "">
<entrée type = "text" placeholder = "Veuillez saisir l'adresse permanente ...">
<input type = "soumi" value = "test">
</ form>
</div>
</docy>
</html>