Comment faire pour que le texte disparaisse comme la manière dont certains champs fonctionnent ici sur stackoverflow une fois que je commence à mettre du texte? J'ai essayé les différentes actions 'on' en HTML mais ça n'a pas vraiment fait ce que je voulais.Supprimer le texte des champs sur l'entrée
Merci.
Vous pouvez le faire avec des événements onfocus/onblur. Par exemple:
<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>
Si vous cliquez sur ce champ de saisie, le texte par défaut "recherche" disparaîtra. Le gestionnaire d'événements onfocus vérifie si ce champ de saisie a la valeur "search" et si c'est le cas, il le supprime, dans d'autres cas (l'utilisateur a déjà tapé quelque chose) tout laisse tel quel.
utilisation du onFocus() en javascript
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />
On peut supposer que vous voulez dire "étiquettes qui apparaissent à l'intérieur de l'entrée". Si vous voulez le faire de manière sémantique, accessible et sémantique - utilisez un <label>, si JS est disponible, positionnez-le sous l'élément, et onfocus/onblur changez les classes en fonction de la valeur de l'élément.
J'ai tapé un exemple simple à http://dorward.me.uk/tmp/label-work/example.html en utilisant jQuery (toute la source qui ne fait pas partie de la bibliothèque jQuery est incorporée dans le code HTML de ce document pour une lecture facile).
jQuery rendrait ce travail facile; http://www.jsfiddle.net/TshDN/
:) C'est vraiment pas plus facile que les exemples non jQuery donnés précédemment. – Quentin
Vous n'avez pas besoin d'une bibliothèque de 100 Ko pour faire un * one-liner * – Andris
Le but ici était de démontrer cela dans jQuery car stackoverflow utilise la lib et il voulait quelque chose comme stackoverflow. Mais oui, vous avez tous les deux raison - 100kb n'est pas nécessaire pour un one-liner et un onfocus serait mieux. – gnome
Si vous utilisez HTML 5, vous pouvez utiliser l'espace réservé attribut.
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
Vous pouvez même utiliser la bibliothèque JavaScript de Modernizr pour tester l'attribut espace réservé: http://www.modernizr.com/docs/#input –
Merci, c'est ce que je cherchais – Nisto