Plugin jQuery: textarea com conta de caracteres

Nos dois artigos anteriores já falamos dos Plugins em jQuery e das regras fundamentais para desenvolvê-los. Também vimos um primeiro exemplo de um plugin simples, que espero nos tenha aberto os olhos e dado uma ideia sobre as possibilidades de construção de componentes para páginas web. Neste artigo continuaremos oferecendo exemplos para reforçar o que foi aprendido e para que as pessoas possam se familiarizar ainda mais com o modo de criação de plugins em jQuery.

O objetivo do exemplo que ocupará este artigo é a criação de um plugin para conseguir que um campo textarea de formulário informe a todo o momento dos caracteres que o usuário escreveu. Ou seja, vamos fazer um método do objeto jQuery que servirá para dizer aos campos de texto textarea que se expandam para se converterem em um textarea que conte os caracteres em uma camada de texto do lado.

Para ter uma ideia exata de nossos objetivos podemos ver o exemplo em funcionamento que vamos desenvolver.

Entendamos o plugin textarea com contador de caracteres

$("textarea").contaCaracteres();

Com isso queremos que em todos os textareas do documento HTML apareça uma informação do lado com o número de caracteres que o textarea tenha escrito dentro. Essa conta de caracteres deve ser mostrada assim que se carregar a página e atualizar quando se escreva algo dentro. Tudo isso se automatizará, para que não tenhamos que fazer nada, salvo a chamada anterior ao plugin.

Então, dentro do plugin temos que fazer várias coisas.

1. Um loop com each para recorrer todos os objetos que possa haver no objeto jQuery que receba o método para ativar este plugin. Este passo é igual em todos os plugins.
2. Dentro desse loop podemos iterar com todos os elementos que haja no objeto jQuery, que vamos supor sejam textareas. Vamos criar um novo elemento DIV improvisando e vamos iniciá-lo com o texto da conta de caracteres atual do textarea. Esse elemento criado "on the fly" será acrescentado ao corpo da página, exatamente depois da etiqueta do textarea.
3. Ademais, faremos um evento para que quando o usuário escreva algo no textarea, o texto com a conta de caracteres seja atualizado automaticamente.

//crio o plugin contaCaracteres
jQuery.fn.contaCaracteres = function() {
   //para cada um dos elementos do objeto jQuery
   this.each(function(){
      //crio uma variavel elem com o elemento atual, supomos um textarea
      elem = $(this);
      //crio um elemento DIV improvisando
      var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');
      //insiro o DIV depois do elemento textarea
      elem.after(contador);
      //salvo uma referencia ao elemento DIV nos dados do objeto jQuery
      elem.data("campocontador", contador);
      
      //crio um evento keyup para este elemento atual
      elem.keyup(function(){
         //crio uma variavel elem com o elemento atual, supomos um textarea
         var elem = $(this);
         //recupero o objeto que tem o elemento DIV contador associado ao textarea
         var campocontador = elem.data("campocontador");
         //modifico o texto do contador, para atualizá-lo com o número de caracteres escritos
         campocontador.text('Contador caracteres: ' + elem.attr("value").length);
      });
   });
   //sempre tenho que retornar this
   return this;
};

O código está comentado para que se possa entender melhor. Talvez nos possa chamar mais a atenção a linha onde se utiliza a função jQuery para gerar improvisando um objeto jQuery com o campo DIV com o que vamos continuar a conta. Vemos que através do método attr() acessamos o value do textarea e com a propriedade length , sua longitude em caracteres.

var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');

A seguir também pode ser que nos chame a atenção o funcionamento do método data(), que nos permite armazenar e recuperar dados que serão salvos no próprio objeto jQuery de cada textarea.

Assim, salvo uma referência ao objeto com a camada contador no textarea, em um dado chamado "campocontador".

elem.data("campocontador", contador);

E com este outro código no evento recupero essa camada, pois em seguida no evento tenho que mudar o conteúdo com a conta de caracteres atualizada.

var campocontador = elem.data("campocontador");

Uma vez criado o plugin, converto todos os textareas em textareas-contador de caracteres, com este código:

$(document).ready(function(){
   $("textarea").contaCaracteres();
})

Isso é tudo, mas talvez fique mais claro se virmos o código completo do exemplo.

<html>
<head>
<title>Criando plugins em jQuery</title>
   <script src="../jquery-1.4.1.min.js"></script>
<script>

//crio o plugin contaCaracteres
jQuery.fn.contaCaracteres = function() {
   //para cada um dos elementos do objeto jQuery
   this.each(function(){
      //crio uma variavel elem com o elemento atual, supomos um textarea
      elem = $(this);
      //crio um elemento DIV improvisando
      var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');
      //insiro o DIV depois do elemento textarea
      elem.after(contador);
      //salvo uma referencia ao elemento DIV nos dados do objeto jQuery
      elem.data("campocontador", contador);
      
      //crio um evento keyup para este elemento atual
      elem.keyup(function(){
         //crio uma variavel elem com o elemento atual, supomos um textarea
         var elem = $(this);
         //recupero o objeto que tem o elemento DIV contador associado ao textarea
         var campocontador = elem.data("campocontador");
         //modifico o texto do contador, para atualizá-lo com o número de caracteres escritos
         campocontador.text('Contador caracteres: ' + elem.attr("value").length);
      });
   });
   //sempre tenho que retornar this
   return this;
};
$(document).ready(function(){
   $("textarea").contaCaracteres();
})
</script>
   
</head>
<body>
<form>
      <textarea rows=5 cols=30 id="meutextarea">ola</textarea>
      <br>
      <br>
      <textarea rows=5 cols=30 id="outrotextarea">Outra conta...</textarea>
   </form>
</body>
</html>

Este exemplo pode ser visto em uma página à parte.

Acrescentar um comentário ao artigo

Regras para o desenvolvimento de plugins em jQuery

Gerenciamento de opções em plugins jQuery

Acrescentar um comentário ao artigo

Foi enviado 1 comentário ao artigo
1 comentário revisado:

Como criar um plugin para usar esse script em várias páginas do site? Por: ortodata

28/1/12

<script type="text/javascript">
$(document).ready(function(){
$('.toggleOpen').click(function() {
$(this).next('.toggle').toggle("medium");
$(this).parent('.item').toggleClass('fefdac');
});
$('span.toggleClose').click(function() {
$(this).parents('.toggle').hide("medium");
$(this).parents('.item').removeClass('fefdac');
});

var conteudo = $('#conteudo');

conteudo.hide();
$('a#exibir').click(function(){
conteudo.show('medium');
});
$('a#ocultar').click(function(){
conteudo.hide('medium');
})
});
</script>

Acrescentar um comentário ao artigo