Accueil > javascript > effacer-champ-onfocus

{ Effacer le contenu d'un formulaire au clic }

Introduction

Le code Javascript pour effacer le contenu d'un champ de type input par exemple est très simple. Nous allons utiliser l'évenement focus pour appeler le bout de code qui va vider le contenu du champ en question. Mettre des informations ou un texte intial dans votre input afin d'informer l'utilsateur que le champ en question doit être rempli avec le prénom par exemple est assez courant comme pratique.

Le problème avec cette "valeur initiale" c'est que niveau expérience utilisateur c'est pas toujours top de devoir sélectionner le texte à l'intérieur du champ et de devoir l'effacer pour ensuite pouvoir écrire ce qu'on veut.

Ce bout répond parfaitement au problème ! Prenons un exemple : Le formulaire de recherche est un cas typique ! La majorité des formulaires de recherches n'ont pas de libellé au dessus du champ de recherche et ce pour des raisons évidentes (gain de place, informe clairement sur ce qui doit aller dans le champ). En résumé c'est également bien pratique quand on a pas la place pour ajouter le libellé en dessus ou à côté du champ.

Et c'est précisement là qu'entre en action notre bout de code Javascript ! On va simplement réperer l'évenement focus (c'est à dire quand l'utilisateur va venir cliquer dans le champ) sur le champ et lui dire d'en vider le contenu (valeur initiale) / alors l'utilisateur n'aura plus qu'à écrire sa requête directement !

Le tant attendu

onFocus="javascript:this.value='Texte initial'"

Dans notre input, ça nous donne quelque chose comme ça :

Si on analyse ce bout de code, on voit l'évenement sur lequel on va se concentrer (onFocus), this pour dire que c'est bien à ce champ là qu'on veut appliquer l'effet et pas un autre value on va spécifier la valeur que devra prendre le champ lorsque l'évenement se produira et enfin "" ce qui correspond à aucun caractère !

Exemple

- Waa super le bout de code ! Mais quand je clique à côté du champ le texte initial ne réapparaît pas...

- T'as complètement raison ! Alors pour les Alzeihmer des champs on va pousser la fonction un peu plus loin afin de résoudre ce problème.

Pour aller plus loin...

Pour compléter l'idée on utilisera un autre évenement (onblur) afin de décrire une action lorsque l'utilisateur cliquera en dehors du champ, on peut imaginer (et c'est en général pour cela qu'on l'utilise) de restaurer la valeur initiale du champ.

Pour ce faire, il est nécessaire de placer ce petit script dans le pied de votre page (juste avant la balise de fermeture </body>.

Prenez également note qu'on a mis dans une fonction myFocus() le bout de code que nous avions précédemment afin de faciliter son utilisation : très pratique si vous avez plusieurs input.

function myFocus(element) { 
if (element.value == element.defaultValue) 
{ element.value = ''; } } 

function myBlur(element) 
{ if (element.value == '') 
{ element.value = element.defaultValue; } } 

Maintenant que notre petite fonction est codée et prête à l'emploi nous allons l'employer !!! =D

PS : n'oubliez pas d'ajouter l'évenement "onBlur" dans votre input afin que celui-ci puisse réagir quand la souris le quittera.."

Donc l'évenement qui nous intéresse c'est lorsque l'utilisateur quitte le champ en cliquant à côté par exemple. Notre script entre en action en repérant l'évenement et restaure simplement la valeur par défaut de notre champ.

Le tour est joué !