entrée et de la valeur d'évanouissement de la zone de texte
-
01-10-2019 - |
Question
Je veux être capable de faire quelque chose comme
<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>
Et l'auto volonté de titre effacent et vous en tant que la valeur du champ, contrairement à la « recherche » ici en stackoverflow (à droite sur le dessus, il se fanent seulement out).
Je pourrais venir avec un javascript et l'utilisation onblur
et onfocus
, mais ce serait gênant et j'espère inutile. De préférence, je trouve à une seule fonction pour chaque entrée et TEXTAREA dans ne importe quel fichier donné, donc tous besoin I de faire est mis en place son title
.
Première question : quel est le nom de cette
Question principale : Quelqu'un at-il une bonne solution? Qu'en est-il sans jquery? Peut-être qu'il ya une façon de le faire avec CSS3 que, bien que je doute ...
La solution
Si vous êtes OK avec fonctionner uniquement dans les navigateurs plus récents, vous pouvez utiliser le Plongez au coeur de HTML5 .
<input type="text" name="txtField" value="" placeholder="input your text" />
Si vous voulez travailler dans les anciens navigateurs, vous aurez probablement à mettre en œuvre l'espace réservé vous-même, en JavaScript par exemple. Vous pouvez trouver tous vos éléments input
et textarea
en utilisant document.getElementsByTagName
et ajoutez le onfocus
et les gestionnaires de onblur
à chacun de ceux qui utilisent événements DOM .
Autres conseils
Ok, merci à réponse parfaite de Brian, voici le code que je suis venu avec. Ça m'a pris assez longtemps pour le faire fonctionner:
<form>
<input type="text" name="txtField" value="" placeholder="input your text" />
<textarea name="areaField" placeholder="input your long text"></textarea>
</form>
<script type="text/javascript">
(function() {
ie_placeholder(document.getElementsByTagName('input'));
ie_placeholder(document.getElementsByTagName('textarea'));
function ie_placeholder (fields) {
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
field.onfocus = function () {
if (this.value == this.placeholder) {
this.style.color = '';
this.value = '';
}
};
field.onblur = function () {
if (this.value == '' && this.placeholder != null) {
this.style.color = 'silver';
this.value = this.placeholder;
}
};
field.onblur();
}
}
})();
</script>
Il suffit de mettre à la fin de la forme, et vous devriez être bien. Et, s'il vous plaît, utilisez votre script côté serveur favori pour le supprimer de navigateurs compatibles HTML5. espace réservé attribut que le travail sur HTML5 .