JQuery vide un champ de texte Quand je clique dessus

Question

Comment puis-je vider un champ de texte (formulaire html) si je clique dessus pour écrire quelque chose.

Pseudo Code:

On click #searchform 
Erase String in #searchform 

Answer 1

Try it here

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') { 
     $(this).data('original', $(this).val()).val(''); 
    } 
}); 

$('#searchform').blur(function() { 
    if ($(this).val() == '') { 
     $(this).val($(this).data('original')); 
    } 
}); 

EDIT A partir de maintenant, vous devez utiliser l'attribut placeholder et si vous voulez, utilisez ci-dessus comme polyfill manquantes support d'espace réservé.

if (!('placeholder' in document.createElement('input'))){ 
    $('input[placeholder]').each(function() { 
     $(this).placeholder(); 
    }); 
} 

Et de transformer le code original en un plugin pour une utilisation facile (avec quelques petits mods).

jQuery.fn.placeholder = function() { 
    return this.each(function() { 
     var value = $(this).attr('placeholder'); 
     jQuery(this).val(value).addClass('placeholder'); 
     jQuery(this).focus(function() { 
      if (jQuery(this).val() == value) { 
       jQuery(this).val('').removeClass('placeholder'); 
      } 
     }); 

     jQuery(this).blur(function() { 
      if (jQuery(this).val() == '') { 
       jQuery(this).val(value).addClass('placeholder'); 
      } 
     }); 
    }); 
}; 

Answer 2

$('#searchform').click(function() { $(this).val('') }) 

Answer 3

Si vous êtes désireux d'effacer une valeur par défaut d'un champ, comme « Enter Terme » J'utilise le code suivant:

function clearText(thefield){ 
if (thefield.defaultValue==thefield.value) 
thefield.value = "" 
} 

puis sur mon champ d'entrée ajouter:

onfocus="clearText(this)" 

il serait donc:

<input type="text" name="username" value="enter your name here" onfocus="clearText(this)"> 

Answer 4

Je vous recommande d'utiliser l'attribut espace réservé HTML5. Par exemple:

<input type="text" placeholder="some default string if empty" /> 

Cela fonctionne avec la plupart des navigateurs les plus récents et pour les plus âgés, il existe une solution plugin jQuery. Voici le lien vers le placeholder plugin.

Et vous appelez simplement:

$('input[placeholder]').placeholder();