l’un de mes nouveaux morceaux préférés dans HTML5 est la possibilité d’ajouter du texte D’espace réservé facilement. Le texte de l’espace réservé est le texte gris que vous trouvez dans un champ de saisie qui est utilisé pour donner un indice aux utilisateurs sur les entrées attendues dans ce champ. Une fois que les utilisateurs commencent à taper dans le champ input, ce texte disparaîtra.
autrefois, nous le faisions généralement avec JavaScript, comme suit;
Il n’y a rien de mal à cette pratique, mais c’est plus facile avec HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Voici un exemple:
<input type="text" placeholder="Placeholder Text">
Si nous l’affichons sur les navigateurs, l’entrée devrait maintenant avoir le texte gris, comme vu ci-dessous;
quelques points à noter: selon la spécification, l’attribut placeholder ne doit pas être utilisé comme alternative à un label Et il est également suggéré que cet attribut ne soit appliqué qu’aux types input qui nécessitent du, text, password, search, email, textarea et tel.
Ajout placeholder à la balise input types: radio et checkbox ne fera aucune différence.
Placeholder& CSS
de plus, le style du texte de l’espace réservé via CSS est également possible, mais au moment d’écrire ces lignes, il est toujours limité aux seuls navigateurs Firefox et Webkit.,
l’exemple suivant montre comment nous changeons le texte de l’espace réservé en vert à la fois dans Webkit et Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
juste pour se souvenir cependant, les ::-webkit-input-placeholder Et :-moz-placeholder n’affecteront que le texte et ne pourront pas être écrits en parallèle.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
ce morceau de code ne fonctionnera pas.,
Attribute Selector
CSS3 a également pris en charge cet attribut en introduisant le attribute selector;
input {border: 1px solid green;}
dans l’exemple ci-dessus, nous sélectionnons tous lesinput qui b4b9c44f7b »>
attribuez et changez la bordure en vert.,
compatibilité du navigateur
sans surprise, cette nouvelle fonctionnalité HTML5 n’est pas prise en charge dans les anciens navigateurs et n’est actuellement entièrement prise en charge que dans: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 Explorer 10 (qui n’a pas encore été officiellement publié).
Polyfills D’espace réservé
néanmoins, si nous avons besoin d’afficher l’espace réservé dans les navigateurs plus anciens mais que nous pouvons toujours utiliser l’attributplaceholder, nous pouvons utiliser des Polyfills., Il y a beaucoup d’espace Réservé Polyfills, mais dans cet exemple, nous allons utiliser le PlaceMe.js:
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
Le PlaceMe.js, comme vous pouvez le voir dans l’extrait de code ci-dessus, dépend de jQuery. Maintenant, si nous l’affichons dans, Par exemple, Internet Explorer 9, toutes les entrées devraient maintenant afficher le texte de l’espace réservé.
- afficher la démo
- télécharger la Source
pensée finale
L’attribut D’espace réservé HTML5 facilite certainement l’ajout de texte d’espace réservé., Maintenant, c’est à nous, développeurs web et concepteurs, de choisir la méthode à utiliser: JavaScript ou HTML5.
Si vous considérez que L’utilisation de Polyfills et jQuery pour prendre en charge les anciens navigateurs est redondante, alors JavaScript est apparemment plus adapté pour le travail. Mais si vous pouvez ignorer pacifiquement les anciens navigateurs, l’utilisation de L’espace réservé HTML5 est probablement un meilleur moyen.