Carlos Brando

Nome do Jogo

Utilizando valores de entrada como sugestões, a maneira fácil

Thomas Fuchs, o criador do script.aculo.us iniciou um novo projeto esta semana chamado Prototype helpers. O projeto visa disponibilizar uma série de scripts do Prototype criados por ele.

Eu particularmente gostei muito do defaultValueActsAsHint, um script que facilita a inclusão de dicas sobre o preenchimento de um formulário dentro do próprio campo no formato de um texto mais claro. Ao se clicar no campo o texto some, mas caso o usuário não preencha o campo o texto volta a aparecer ao perder o foco.

Enfim, é melhor mostrar do que falar. Clique aqui para ver um exemplo funcionando.

Como não sou um usuário de Prototype, fiz questão de portar este script para um plugin do jQuery, que faço questão de disponibilizar para vocês.

Para usar é muito fácil, lembrando que você deve estar usando o jQuery, basta incluir o script abaixo em sua página:

(function($){
  $.fn.defaultValueActsAsHint = function() {
    return this.each(function() {
      $(this).attr('_default', $(this).attr('value'))
      $(this).addClass('hint');

      $(this).bind('focus', function(event) {
        if ($(this).attr('_default') == $(this).attr('value'))
          $(this).removeClass('hint').attr('value', '');
      });

      $(this).blur(function() {
        if ($.trim($(this).attr('value')) == '')
          $(this).addClass('hint').attr('value', $(this).attr('_default'));
      });

    });
  };
})(jQuery);

Download: jquery.defaultvalueactsashint.js

E definir quais campos se beneficiarão deste script, assim:

<script type="text/javascript" charset="utf-8">
  $('#foo').defaultValueActsAsHint();
</script>

Como sempre, tudo está em um projeto no GitHub. Bom divertimento!

Comments