Introduction à l'espace réservé HTML5 (invite vide)compétences du didacticielattribut

Introduction à l'espace réservé HTML5 (invite vide)compétences du didacticielattribut_html5

WBOY

Libérer： 2016-05-16 15:48:56

original

1935 Les gens l'ont consulté

Adresse d'origine : Attribut d'espace réservé HTML5
Adresse de démonstration : démo d'espace réservé
Date d'origine : 9 août 2010
Date de traduction : août 2013 Le 6
le navigateur a introduit de nombreuses fonctionnalités HTML5 : certaines sont basées sur HTML, d'autres sous la forme d'API JavaScript, mais elles sont toutes utiles. L'un de mes favoris est l'introduction de l'attribut placeholder pour les éléments d'entrée.
L'attribut placeholder affiche le texte d'introduction jusqu'à ce que la zone de saisie obtienne le focus de saisie. Lorsque l'utilisateur saisit du contenu, le contenu d'introduction sera automatiquement masqué. Vous avez sans doute vu cette technique implémentée des milliers de fois dans JavaScript, mais la prise en charge native de HTML5 est généralement meilleure.
Le code HTML est le suivant :

Copier le code

Le code est le suivant :

< input type="text" name="address" placeholder="Veuillez entrer votre adresse permanente...">

Tout ce que vous avez à faire est d'ajouter un champ d'attribut d'espace réservé et du contenu texte de guidage, aucun script JavaScript supplémentaire n'est requis pour obtenir cet effet, n'est-ce pas génial
Tester la prise en charge de l'espace réservé
(Notez qu'il s'agit d'un article de 2010 ? , jusqu'à présent, en 2013, tous les principaux navigateurs devraient le prendre en charge.)
Étant donné que l'espace réservé est une nouvelle fonctionnalité, il est nécessaire de tester la prise en charge du navigateur. Le code JS est le suivant :

Copier le code

Le code est le suivant :

// Dans JS Créez un élément d'entrée et déterminez si l'élément a un attribut appelé placeholder
// Si le navigateur le prend en charge, cet attribut existera dans le DOM référencé dans js
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

Et si le navigateur ne prend pas en charge la fonctionnalité d'espace réservé, alors vous avez besoin d'une stratégie de secours à gérer, telle que MooTools, Dojo ou d'autres outils JavaScript. (Dojo peut être moins utilisé maintenant, et jQuery et ExtJS sont plus couramment utilisés en Chine.)

Copier le code

Le le code est le suivant :

/* Code jQuery, bien sûr, pensez à présenter la bibliothèque jQuery*/
$(function(){
if(!hasPlaceholderSupport()){
// Récupère l'élément d'adresse
var $address = $("input[name='address']");
placeholder = $address.attr("placeholder"); Lier l'événement focus
$address.bind('focus',function(){
if(placeholder == $address.val()){
$address.val('');
}
} );
// Événement de perte de focus
$address.bind('blur',function(){
if('' == $address.val()){
$address.val (placeholder);
}
});
}
});

placeholder est un autre excellent attribut supplémentaire du navigateur pour remplacer les fragments js, vous Vous pouvez même modifier le style de l'espace réservé HTML5
L'intégralité du code est la suivante :

Copiez le code Le code est le suivant :

Démonstration d'attribut d'espace réservé HTML5 Générateur" content="EditPlus">

<script> // Créez un élément d'entrée dans JS et déterminez si l'élément a un attribut appelé espace réservé // Si le navigateur le prend en charge, alors le DOM référencé dans js aura cette fonction Propriétés hasPlaceholderSupport() { var input = document.createElement('input'); return ('placeholder' in input); /* code jQuery, bien sûr, n'oubliez pas d'importer le bibliothèque jQuery*/ $(function(){ if(!hasPlaceholderSupport()){ // Récupère l'élément d'adresse var $address = $("input[name= 'address' ]"); placeholder = $address.attr("placeholder"); // Lier l'événement de focus $address.bind('focus',function(){ if(placeholder = = $address.val()){ $address.val(''); } } // Événement de perte de focus $address.bind ('flou'); ,function(){ if('' == $address.val()){ $address.val(placeholder); } } } }); </script>