Pinceladas da Web

Você por um acaso já viu aqueles contadores de caracteres restantes em formulários e não teve a menor idéia ou saco pra fazer aquilo, pois bem, procurando no google achei um plugin para jQuery que faz isso de uma forma bem simples, mas sua aplicação é somente a inputs, não sendo aplicado a textareas:

jQuery.fn.counter = function() {
  $(this).each(function() {
    var max = $(this).attr('maxlength');
    var val = $(this).attr('value');
    var cur = 0;
    if(val) // value="", or no value at all will cause an error
      cur = val.length;
    var left = max-cur;
    $(this).after("<div class='counter'>"
      + left.toString()+"</div>");
    // You can use something like this to align the
    // counter to the right of the input field.
    var c = $(this).next(".counter");
    c.width(40);
    c.css("position","relative");
    c.css("top",-$(this).height()-8);
    c.css("left",$(this).width()+8);
    c.css("background","yellow");

    $(this).keyup(function(i) {
      var max = $(this).attr('maxlength');
      var val = $(this).attr('value');
      var cur = 0;
      if(val)
        cur = val.length;
      var left = max-cur;
      $(this).next(".counter").text(left.toString());
      return this;
    });
  });
  return this;
}

Continuar lendo »

O Framework jQuery está se tornando a biblioteca JavaScript mais popular dos últimos tempos, isto é fato, até a Microsoft irá utilizá-la no .NET futuramente. Sua utilização é extremamente simples, com ela você pode tem suporte ao DOM, eventos, Ajax, animações e várias outras coisas. Nesse vídeo de apresentação de John Resig (criador da jQuery) mostrado no AJAX Experience 2008 Conference você vai ficar conhecendo um pouco mais sobre a jQuery e irá aprender a fazer animações e construir um accordion do zero.

Via: Digital Skraps.

Para criar máscaras com jQuery, iremos usar o plugin Masked Input, com apenas uma linha de código podemos criar qualquer tipo de máscara.

Para começar, caso não tenha o jQuery, faça o download do mesmo, após isso pegue o Masked Input, e apenas inclua-los em sua página.

Agora vamos criar as máscaras que precisamos.

jQuery.noConflict();
(function($) {
$(function() {
$('.mask-data').mask('99/99/9999'); //data
$('.mask-hora').mask('99:99'); //hora
$('.mask-fone').mask('(999) 999-9999'); //telefone
$('.mask-rg').mask('99.999.999-9'); //RG
$('.mask-ag').mask('9999-9'); //Agência
$('.mask-ag').mask('9.999-9'); //Conta
});
})(jQuery);

Repare que estou setando as máscaras para “classes”, no site do autor é usado “ids”, mas isso não é muito legal, caso tenha dois campos de telefone numa mesma página, teriamos que mecher no javascript, pois não pode haver “id” repetidos na mesma página.

Agora pra implemetar as máscaras é só incluir as classes setadas nos inputs dos formulários.

<input type="text" name="fone1" class="mask-fone" />
<input type="text" name="fone2" class="mask-fone" />
<input type="text" name="rg" class="mask-rg" />
<input type="text" name="cpf" class="mask-fpc" />

E pronto, já esta funcionando, repare que caso você erre, é possível alterar sem ter que apagar tudo, geralmente algumas máscaras, como a do Banco do Brasil, não deixa editar pelo meio do campo, temos que apagar e digitar tudo de novo, se não tudo que for digitado vai para o final do campo.

Para facilitar, recomendo colocar o código que gera as máscaras no final do código do plugin, sim no mesmo arquivo, assim você não precisa ficar refazendo, e é só incluir e usar.