Tip Precoz 6: Limpiar valores de input

8/jun/2010 14

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

Comentarios

  1. Gabriel Porras [#]

    Yo estuve necesitando esta misma funcionalidad hace algunos días y creo que te puede gustar este código el cual utiliza el atributo placeholder (que viene del HTML5) y hará que este script no sea necesario. Míralo y me cuentas qué tal: http://jqueryhints.codeplex.com/Thread/View.aspx?ThreadId=213075
    Saludos!

  2. Proshen [#]

    Interesante … enhorabuena por este proyecto tan instructivo. Te sigo de cerca.

    Gracias,

  3. Jorge Epuñan [#]

    Gabriel: es muy interesante el placeholder en HTML5 y seguro es muy util, pero mientras el soporte no sea amplio lamentablemente prefiero hacerlo a la antigua pero a la segura.

  4. Developtus [#]

    buen ejemplo ahora agregaria ademas alguna clase dinamicamente, pq si ingresas el mimso texto q esta cargado el script falla
    igualmente es muy bueno el ejemplo

  5. Elpibelinuxero [#]

    Yo uso un plugin de jquery para hacer eso, hace lo mismo:

    http://plugins.jquery.com/project/valpreset

    Saludoss

  6. Gabriel Porras [#]

    Hola Jorge.. Jeje…
    ¿Revisaste el script?
    Es que este revisa si el navegador tiene soporte para el PlaceHolder y en caso de no tenerlo aplica el script que tu hiciste
    ; )
    Saludos!

  7. jose luis [#]

    Hola jorge te queria comentar esta pequeña duda que me ha surgido cuando si me hago clic en el buscar y luego le doy la tecla escape el texto se queda pegado y me premite escribir, tambien se tendria que validar la tecla escape por lo demas muy bien. gracias

  8. Jorge Epuñan [#]

    jose luis: Lo de la tecla escape no me complica, ya q es accesibilidad minima q entrega el browser y el OS; seria lo mismo si bloquearamos el resumen de <input> atraves de la tecla tab.

    Saludos.

  9. Alex Aguiar [#]

    Excelente que vuelvas a retomar el sitio, y uff de que manera, lindo theme, y buen aporte lo necesitaba :)

  10. Rochester [#]

    (Vou escrever em português, não sou muito bom em espanhol).
    Tive um problema ao utilizar input type submit, só modifiquei a primeira linha do seu código e funcionou corretamente:
    $(“input:not(input[type=submit])”).each(function(){

    abraços
    Rochester

  11. Jorge Epuñan [#]

    Rochester: obrigado pela aclaraçao, por isso mesmo q as vezes prefiro usar <button> em vez de <input /> para o submit.

    Abçs.

  12. Rochester [#]

    Olá Jorge,
    O wordpress removeu a tag do seu comentário, mas acredito que você falava de utilizar o button no lugar de input pro submit.
    Concordo com você, mas como peguei o sistema pela metade, a solução de testar se é submit me poupou um trabalhão (além do trabalho que sua solução poupou, claro).

    []’s
    Rochester

  13. Jorge Epuñan [#]

    Comentario corregido, as vezes acontece. Q bom q resolveu seu problema, abçs.

  14. Gonzalo [#]

    Muy bueno !! justo lo que estaba buscando.

    Slds
    Gonzalo

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab