CSSLab

Tip Precoz 6: Limpiar valores de input

Tweet

Esta pequeña función de jQuery me es muy útil cuando tengo un campo de texto (<input>, <textarea>, etc) y éste tiene un valor por defecto (por ejemplo, el Buscar que se ve en el header de este humilde sitio). Cuando hago foco en él para escribir, quiero que ese value desaparezca y el usuario pueda ingresar lo que quiera; caso contrario, si el usuario lo deja vacío o si es el mismo que el original (en este caso, Buscar) vuelve a restablecerse al definido por defecto.

$('input').each(function(){
   // tomamos el valor actual del input
   var currentValue = $(this).val();
   // en el focus() comparamos si es el mismo por defecto, y si es asi lo vaciamos
   $(this).focus(function(){
      if( $(this).val() == currentValue ) {
         $(this).val('');
      };
   });
   // en el blur, si el usuario dejo el value vacio, lo volvemos a restablecer
   $(this).blur(function(){
      if( $(this).val() == '' ) {
         $(this).val(currentValue);
      };
   });
});

Ver ejemplo