Effacement du contenu d'une entrée/zone de texte lorsqu'on clique dessus?

Question

pour faciliter l'édition de ces champs, je serais ravi que leur contenu soit effacé quand on clique dessus. De plus, la valeur par défaut (présentée initialement) doit être soumise si elle n'a pas changé, cela signifie que je ne recherche (probablement) pas d'espace réservé (n HTML 5) qui sera effacé automatiquement, mais de texte réel. Serait encore mieux si la valeur par défaut reviendrait si le champ est désélectionné et laissé vide.

Des suggestions? Exemple: l'entrée "votre e-mail" en haut de http://www.makeuseof.com/.

Answer 1

<input type="text" value="Something" onfocus="if (this.value == this.defaultValue) this.value='';" onblur="if (this.value == '') this.value = this.defaultValue;"> 

Si vous voulez l'utiliser dans plus d'un élément, vous devez extraire les gestionnaires d'événements à une fonction/script externe.

EDIT:

Lorsque vous utilisez une fonction externe, vous devrez fournir une référence à l'élément d'entrée en tant que paramètre à la fonction.

<script type="text/javascript"> 
    function focused(element){if (element.value == element.defaultValue) element.value='';} 
    function blurred(element){if (element.value == '') element.value = element.defaultValue;} 
</script> 

<input type="text" value="Default Value" onfocus="focused(this)" onblur="blurred(this)"> 

NB: En JavaScript, les fonctions commencent par une lettre minuscule.

Answer 2

Essayez avec onfocus:

<input type="text" value="Default text" onfocus="this.value = ''">