Exemples d'utilisation de l'attribut placeholder en HTML5 et méthodes pour embellir l'affichage effect_html5 compétences du didacticiel

L'attribut placeholder vous permet d'afficher les informations d'invite dans la zone de texte. Une fois que vous avez saisi des informations dans la zone de texte, les informations d'invite seront masquées. Vous avez peut-être déjà vu cet effet d'innombrables fois auparavant, mais la plupart d'entre eux ont été implémentés en JavaScript, mais désormais, HTML5 fournit un support natif, et l'effet est encore meilleur !

Code HTML

Copier le code

Le code est le suivant :

< ;input type="text" name="first_name" placeholder="Votre nom..." />

Vous avez également vu qu'il vous suffit d'ajouter l'attribut placeholder à la déclaration balise de la zone de texte. Aucun JavaScript n'est requis pour créer cet effet.

Vérifiez si le navigateur prend en charge l'attribut Placeholder

Comme l'espace réservé est un nouvel attribut, il est nécessaire de vérifier si votre navigateur le prend en charge. Par exemple, IE6 et IE8 ne le prennent absolument pas en charge :

Copier le codeLe code est le suivant :

function hasPlaceholderSupport() {
var input = document.createElement('input');
return ( 'placeholder' in input);
}

Si le navigateur de l'utilisateur ne prend pas en charge la fonctionnalité d'espace réservé, vous devez utiliser MooTools, Dojo ou d'autres outils JavaScript pour l'implémenter :

Copier le codeLe code est le suivant :

/* mootools ftw */
var firstNameBox = $('first_name '),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value = = message) { searchBox.value = ''; },
flou: function() {
if(firstNameBox.value == '') { searchBox.value = message; >
});

Embellissez l'espace réservé avec CSS

Au cours de recherches plus approfondies, j'ai découvert une autre fonctionnalité CSS intéressante : CSS embellit l'effet d'espace réservé INPUT. Permettez-moi d'utiliser un code CSS simple pour embellir le texte d'espace réservé dans la zone de texte.

Code CSS

L'utilisation dans Firefox est différente de celle dans Google Chrome. Leurs noms sont faciles à comprendre :

Copiez le code

Le code est le suivant :

/ * tous */

::-webkit-input-placeholder { color:#f00; }

::-moz-placeholder { color:#f00 } /* firefox 19 */
:-ms -input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00 }
/* individuel : webkit */
#field2 ::- webkit-input-placeholder { couleur:#00f; }
#field3::-webkit-input-placeholder { couleur:#090; background:text-transform:uppercase }
#field4; ::- webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999 }
/* individuel : mozilla */
#field2 :: -moz- placeholder { couleur:#00f; }
#field3::-moz-placeholder { couleur:#090; background:text-transform:uppercase; { font-style:italic; text-decoration:overline; letter-spacing:3px;#999;
Vous pouvez contrôler la police, la couleur et le style du texte de l'espace réservé. Vous pouvez même animer l’espace réservé de la zone de texte. Embellir vos zones de texte peut sembler une petite chose, mais pour certains sites Web interactifs, la clé du succès réside dans les détails. Désormais, IE10 ne prend en charge que les espaces réservés. Je pense que de plus en plus de personnes utiliseront cet effet d'espace réservé natif.