Comment faire pour que les valeurs de formulaire disparaissent lorsque j'entre dans le champ?

Question

Je fais un formulaire simple avec environ huit champs de saisie. Je veux que la valeur initiale dans le champ indique ce que les gens sont supposés entrer. Par exemple value = "nom" pour que les gens sachent y entrer nom. Ma question est de savoir comment faire pour que la valeur initiale disparaisse lorsqu'ils entrent dans ce champ afin que la valeur initiale ne soit qu'un indice et non une valeur permanente qu'ils doivent effacer avant de pouvoir taper leur nom?

Merci!

Answer 1

Définissez la valeur "par défaut" sur "Nom". Ensuite, en utilisant javascript et l'événement 'onfocus', effacez le champ.

Alors vous auriez:

<input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/> 

Answer 2

javascript de base:

<input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' /> 

Answer 3

Voici comment vous devriez le faire.

<input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;"> 

Si elles cliquent dessus et désactivent la valeur par défaut retournera. Si elles cliquent dessus et tapent quelque chose, elles n'essaieront pas d'effacer ce qu'elles ont mis si elles reviennent pour cliquer à nouveau dessus.

Answer 4

Un moyen bien plus simple pourrait être:

placeholder="Name" 

Answer 5

Juste pour S & G Je pensais que je posterais une solution jQuery réutilisable pour ce problème.

var formDefaulter=function(){ 
    //Class to hold each form element 
    var FormElement=function(element){ 
     var that=this; 
     this.element=element; 

     var initialVal=this.element.val(); 
     var isEdited=false; 

     this.element.focus(function(){clearBox()}); 
     this.element.blur(function(){fillBox()}); 

     var clearBox=function(){ 
      if(!isEdited){ 
       that.element.val(""); 
       isEdited=true; 
      } 
     } 
     var fillBox=function(){ 
      if(that.element.val()==""){ 
       that.element.val(initialVal); 
       isEdited=false; 
      } 
     } 
    } 

    var add=function(elementId){ 
     new FormElement($('#'+elementId)); 
    } 

    return{ 
     add:add 
    } 
}(); 

Ensuite, vous devez simplement attacher chaque élément en utilisant une valeur d'attribut ID. Comme ceci:

$(function(){ 
    formDefaulter.add('contact_name'); 
    formDefaulter.add('contact_email'); 
    formDefaulter.add('contact_msg'); 
}); 

Ceci remplit également l'élément de formulaire avec sa valeur d'origine si son contenu est supprimé. Quoi qu'il en soit, j'espère que c'est utile à quelqu'un.