Explication détaillée de l'attribut d'espace réservé HTML5

Cet article présente principalement l'attribut HTML5 placeholder en détail. L'attribut placeholder vous permet d'afficher des informations d'invite dans la zone de texte

.

HTML5 introduit de nombreuses nouvelles fonctionnalités intéressantes ; certaines sont reflétées dans HTML, et d'autres sont JavaScript API, qui sont toutes très utiles. L'une de mes fonctionnalités préférées est l'attribut d'espace réservé dans la zone de texte (INPUT). L'attribut espace réservé 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

<input type="text" name="first_name" placeholder="你的姓名..." />

Comme vous pouvez le constater, il vous suffit d'ajouter l'attribut placeholder à la balise de déclaration 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

Étant donné que l'espace réservé est un nouvel attribut, il est nécessaire de vérifier si votre navigateur le prend en charge, comme IE6 et IE8 ne sont définitivement pas pris en charge :

JavaScript Code复制内容到剪贴板
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 autresoutils JavaScript pour l'implémenter :

JavaScript Code复制内容到剪贴板
/* mootools ftw! */  
var firstNameBox = $('first_name'),   
 message = firstNameBox.get('placeholder');   
firstNameBox.addEvents({   
 focus: function() {   
  if(firstNameBox.value == message) { searchBox.value = ''; }   
 },   
 blur: function() {   
  if(firstNameBox.value == '') { searchBox.value = message; }   
 }   
});

Utiliser CSS pour embellir l'espace réservé

Dans l'article précédent, j'ai écrit comment utiliser CSS pour embellir le texte sélectionné par la souris. En approfondissant mes recherches, 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 :

CSS Code复制内容到剪贴板
/* all */  
::-webkit-input-placeholder { color:#f00; }   
::-moz-placeholder { color:#f00; } /* firefox 19+ */  
:-ms-input-placeholder { color:#f00; } /* ie */  
input:-moz-placeholder { color:#f00; }   
  
/* inpidual: webkit */  
#field2::-webkit-input-placeholder { color:#00f; }   
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }   
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }   
  
/* inpidual: mozilla */  
#field2::-moz-placeholder { color:#00f; }   
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }   
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Vous pouvez contrôler la police, la couleur et le style du texte de l'espace réservé. Vous pouvez même afficher l'espace réservé de la zone de texte de manière animée . 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!