Mascara de campo em JS com jQuery.

É muito comum em aplicações sejam web ou não que alguns campos como telefone, por exemplo, tenham que ter um formato padrão. [(99) 9999-9999]. O difícil é conseguir com que o usuário que acessa essa aplicação digite da maneira correa e não [(999)  99999999], por exemplo.

Recentemente ao desenvolvermos um widget, aqui no iG, no deparamos com a mesma situação, no caso era valor. Em uma busca na net encontramos um plugin para jQuery que faz isso de maneira bem fácil.

Na página do plugin é possível baixar o arquivo que deve ser incluído no código logo abaixo do arquivo de inclusão do jquery.

Algo mais ou menos assim:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Depois vem a mágica.

$(function($){
    $("#date").mask("99/99/9999");
});

Permite apenas números e o formato será 99/99/9999.  Simple viu?

Aí você pode uisar com data, hora, valor, etc…

O “9″ representa número, se usar “a” representará letra, se usar “*” representara caracter.

Simples, fácil e objetivo.

Para usar valore, no entanto, pode não ser o ideal uma vez que se digita da esquerda pra direita o que obriga a digitar todos os valores.

  1. jQuery plugin. Seus últimos tweets exibidos em seu blog
  2. Framework -> Javascript -> jQuery
  3. Validação de formularios com jQuery