Commentaire: De nombreuses nouvelles fonctionnalités intéressantes ont été introduites dans HTML5; Certains se reflètent dans HTML, certains sont des API JavaScript, qui sont tous très utiles. L'une de mes fonctionnalités préférées est la propriété d'espace réservé dans la zone de texte (entrée).
La propriété Planolder vous permet d'afficher des informations rapides dans la zone de texte. Une fois que vous avez saisi des informations dans la zone de texte, les informations rapides seront masquées. Vous avez peut-être vu cet effet d'innombrables fois auparavant, mais la plupart d'entre eux sont mis en œuvre en JavaScript, et maintenant HTML5 fournit un support natif et cela fonctionne mieux!
Code html
Vous avez également vu que tout ce que vous avez à faire est d'ajouter l'attribut d'espace réservé à l'étiquette de déclaration de la zone de texte. JavaScript n'est pas du tout nécessaire pour créer cet effet.
Vérifiez si le navigateur prend en charge l'attribut d'espace réservé
Étant donné que Payholder est une nouvelle propriété, il est très nécessaire de vérifier si votre navigateur le prend en charge. Par exemple, IE6 et IE8 ne sont certainement pas pris en charge:
fonction hasplaceholdersupport () {
var input = Document.CreateElement ('Input');
return («placeholder» en entrée);
}
Si le navigateur de l'utilisateur ne prend pas en charge la fonctionnalité d'espace réservé, vous devez utiliser des mootools, du dojo ou d'autres outils JavaScript pour l'implémenter:
/ * mootools ftw! * /
var firstNamebox = $ ('premier_name'),
message = firstNamebox.get ('placeholder');
FirstNameBox.Addevents ({
focus: function () {
if (FirstNameBox.Value == Message) {searchbox.value = ''; }
},
blur: function () {
if (firstNameBox.Value == '') {searchbox.value = message; }
}
});
Embellir l'espace réservé avec CSS
Au cours de nouvelles recherches, j'ai découvert une autre caractéristique CSS intéressante: CSS embellissant l'effet d'espace d'espace en entrée. Permettez-moi d'utiliser le code CSS simple pour embellir le texte de l'espace réservé dans la zone de texte.
Code CSS
L'utilisation du navigateur Firefox est différente de celle de Google Chrome. Leurs noms sont faciles à comprendre:
/* tous */
:: - webkit-int-placeholder {couleur: # f00; }
:: - moz-placeholder {couleur: # f00; } / * Firefox 19+ * /
: -ms-int-placeholder {couleur: # f00; } / * ie * /
Entrée: -moz-placeholder {couleur: # f00; }
/ * individuel: webkit * /
# field2 :: - webkit-int-placeholder {couleur: # 00F; }
# field3 :: - webkit-int-placeholder {couleur: # 090; Contexte: LightGreen; Text-transform: majuscules; }
# field4 :: - webkit-int-placeholder {style de police: italique; Décoration du texte: surclassion; Espacement des lettres: 3px; Couleur: # 999; }
/ * Individu: Mozilla * /
# field2 :: - moz-placeholder {couleur: # 00F; }
# field3 :: - moz-placeholder {couleur: # 090; Contexte: LightGreen; Text-transform: majuscules; }
# field4 :: - moz-placeholder {style de police: italique; Décoration du texte: surclassion; Espacement des lettres: 3px; Couleur: # 999; }
Vous pouvez contrôler la police, la couleur et le style du texte d'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 est quelque chose qui semble petit, mais pour certains sites Web interactifs, la clé du succès réside dans les détails. Maintenant, IE10 ne prend en charge que l'espace réservé. Je crois que de plus en plus de gens utiliseront cet effet d'espace réservé natif.