jQuery: el valor predeterminado del área de texto aparece al hacer clic

Quiero un área de texto con algún texto por defecto. Cuando el usuario haga clic en el área de texto, se eliminará el texto predeterminado. ¿Cómo puedo hacer que el valor de un área de texto desaparezca al hacer clic?

Lo quiero exactamente así, http://www.webune.com/forums/20101025cgtc.html

Pero me gustaría hacerlo en jQuery.

 

Utilizo esto porque es un poco más genérico: borrará el valor del elemento en foco, pero devolverá el valor del elemento al valor predeterminado si está vacío.

 $("#textarea") .focus(function() { if (this.value === this.defaultValue) { this.value = ''; } }) .blur(function() { if (this.value === '') { this.value = this.defaultValue; } }); 

Puede lograr esto incluso sin JavaScript utilizando el atributo de placeholder .

Pero debes tener en cuenta que no todos los navegadores lo admiten todavía. En este caso, puede utilizar, por ejemplo, este complemento: http://plugins.jquery.com/project/input-placeholder

Esto debería funcionar:

 $('#txt') .focusin(function() { if ( this.value == 'Write something...' ) { this.value = ''; } }) .focusout(function() { if ( this.value == '' ) { this.value = 'Write something...'; } }); 

Demostración en vivo: http://jsfiddle.net/g7UKN/1/


Actualizar:

Esto debería hacerlo:

 $('#txt') .each(function() { $(this).data('default', this.value); }) .focusin(function() { if ( this.value == $(this).data('default') ) { this.value = ''; } }) .focusout(function() { if ( this.value == '' ) { this.value = $(this).data('default'); } }); 

Demostración en vivo: http://jsfiddle.net/g7UKN/2/

Solución muy simple no dependiente de jQuery:

  
 $('#textarea').click(function(){ if($(this).val() == "This should be removed.."){ $(this).val() = ""; } }); 

//editar

 var defaultTextAreaValue = "This should be removed.."; $('#textarea').focus(function(){ if($(this).val() == defaultTextAreaValue){ $(this).val(""); } }); $('#textarea').blur(function(){ if($(this).val() == "" || $(this).val() == defaultTextAreaValue){ $(this).val(defaultTextAreaValue); } }); 

Solo prueba el fragmento de abajo. La primera vez que haces clic en el área de texto vacía el contenido.

 $('#textarea').focus(function(){ $(this).empty(); }); 

Necesitas dos manejadores, uno para cuando el elemento se enfoca y otro para cuando lo pierde. Cuando se enfoca, verifique si el valor es solo caracteres de espacio y, si es así, establezca el valor predeterminado.

 $('#textarea').focus( function(){ var $this =$(this); if($this.val() == 'This should be removed..'){ $this.val(''); } }).blur(function() { var $this = $(this); if ($this.val().match(/^\s*$/) { // matches only spaces or nothing $this.val('This should be removed..'); } }); 

Y si alguien quiere hacer este truco en un área de texto cargada de ajax, puede lograrlo con el evento .live() 😉

 $('#textarea').live('focusin',function () { if (this.value === 'leDefault ...') { this.value = ''; } }); $('.larger').live('focusout',function () { if (this.value === '') { this.value = 'leDefault'; } });