HTML5 a apporté de nombreuses améliorations au formulaire Web, telles que le nouveau type de type d'entrée, la validation du formulaire, etc. L'espace réservé est un autre attribut ajouté à HTML5. Lorsque la saisie ou la TextArea définit cet attribut, le contenu de cette valeur sera affiché dans la zone de texte en tant qu'invite de mot gris. Lorsque la zone de texte se concentre, le texte rapide disparaît. Dans le passé, pour réaliser cet effet, JavaScript a été utilisé pour le contrôler:
Étant donné que Payholder est un nouvel attribut, seuls quelques navigateurs le soutiennent actuellement. Comment détecter si le navigateur le prend en charge? (Plus de détection des fonctionnalités HTML5 / CSS3 peut être accessible)
fonction hasplaceholdersupport () {
return 'placeholder' dans document.CreateElement ('entrée');
}
Le texte invite par défaut est gris et le style de texte peut être modifié via CSS:
/ * all * / :: - webkit-int-placeholder {couleur: # f00; } entrée: -moz-placeholder {couleur: # f00; } / * individuel: webkit * / # field2 :: - webkit-int-locholder {colore: # 00f; } # field3 :: - webkit-int-locholder {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; }Compatible avec d'autres navigateurs qui ne soutiennent pas l'espace réservé:
var placeholder = {
_Support: (fonction () {
return 'placeholder' dans document.CreateElement ('entrée');
}) (),
// Le style du texte rapide doit être défini dans d'autres endroits de la page
ClassName: «ABC»,
init: function () {
if (! placeholder._support) {
// La TextArea n'a pas été traitée, ajoutez ce que vous devez faire
var entrées = document.getElementsByTagName ('entrée');
Placeholder.Create (entrées);
}
},
create: function (entrées) {
entrée var;
if (! inputs.length) {
entrées = [entrées];
}
pour (var i = 0, longueur = input.length; i <longueur; i ++) {
entrée = entrées [i];
if (! placeholder._support && input.attributes && input.attributes.placeholder) {
Placeholder._setValue (entrée);
input.addeventListener ('focus', fonction (e) {
if (this.value === this.attributes.placeholder.nodevalue) {
this.value = '';
this.classname = '';
}
}, FAUX);
input.addeventListener ('blur', fonction (e) {
if (this.value === '') {
Placeholder._setValue (this);
}
}, FAUX);
}
}
},
_setValue: fonction (entrée) {
input.value = input.attributes.PlaceHolder.Nodevalue;
input.classname = placeholder.classname;
}
};
// Initialiser toutes les entrées lors de l'initialisation de la page
//PlaceHolder.init ();
// ou définir un élément séparément
//PlaceHolder.create(Document.getElementById('t1 '));