Come faccio a far scomparire i valori del modulo quando entro nel campo?

Question

Sto facendo un semplice modulo con circa otto campi di input. Voglio il valore iniziale nel campo per indicare ciò che le persone dovrebbero inserire. Ad esempio value = "name" in modo che le persone sappiano di inserire lì il nome lì.

La mia domanda però è come si ottiene il valore iniziale a svanire quando entrano quel campo in modo che il valore iniziale è solo un suggerimento e non un valore permanente che devono eliminare prima di poter digitare il proprio nome?

Grazie!

Answer 1

Impostare il valore "predefinito" su "Nome". Quindi, usando javascript e l'evento 'onfocus', cancella il campo.

modo che avrebbe dovuto:

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

Answer 2

javascript di base:

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

Answer 3

Questo è come si dovrebbe fare.

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

Se fanno clic su di esso e fanno clic su di esso, il valore predefinito verrà ripristinato. Se cliccano sopra e scrivono qualcosa, non cercheranno di cancellare ciò che hanno inserito se torneranno a cliccarci di nuovo.

Answer 4

Un modo molto più semplice potrebbe essere:

placeholder="Name" 

Answer 5

Solo per S & G ho pensato di postare una soluzione riutilizzabile jQuery per questo problema.

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 
    } 
}(); 

Quindi è sufficiente collegare ciascun elemento utilizzando un valore di attributo ID. Mi piace così:

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

Questo ricarica inoltre l'elemento del modulo con il suo valore originale se il suo contenuto è cancellato. Comunque, spero che questo sia utile a qualcuno.