Programação

Máscara com JQuery no input

Salve salve terráqueos, depois 40 dias de muuuito serviço, cá estou novamente pra mostrar pra vocês, um tutorial de como adicionar máscara com jQuery no input text, que poderá ser: CEP, CPF, CNPJ, telefone, data, ou qualquer outro campo que precise de padrão.

Bom, pra isso iremos utilizar o maskedinput.js que é quem vai fazer todo o serviço de implementar a máscara no seu input e a seguir, veremos como é fácil o seu uso.

Veja aqui o exemplo

Máscara com jQuery no input

Passo 1: O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags < head >< /head > ou no rodapé do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Caso você já esteja chamando o jQuery na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: add o maskedinput.js

Você pode fazer o download do JS aqui ou pode usar ele direto do desenvolvedor (não recomendado), a diferença pro tutorial, será apenas o caminho que você vai colocar pra chamar seu arquivo, no exemplo abaixo, estou pegando direto do GitHub do desenvolvedor.

<script type="text/javascript" src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js"></script>

É isso, incluído o jQuery e o maskedinput.js vamos agora criar os inputs.

Passo 3: O HTML

No nosso exemplo, eu criei os seguintes campos: Data, CEP, CPF, CNPJ e telefone fixo, então, meus inputs ficaram mais ou menos assim:

<!-- CAMPO DATA -->
<label>Data</label>
<input type="text" id="data" />
<!-- CAMPO CEP -->
<label>CEP</label>
<input type="text" id="cep" />
<!-- CAMPO CPF -->
<label>CPF</label>
<input type="text" id="cpf" />
<!-- CAMPO CNPJ -->
<label>CNPJ</label>
<input type="text" id="cnpj" />
<!-- CAMPO TELEFONE -->
<label>Telefone fixo</label>
<input type="text" id="telefone" />

Pronto, criado o HTML dos inputs para adicionarmos a máscara com jQuery, vamos adicionar o script com a formatação que queremos em cada campo.

Passo 4: O script

Bom, você deve adicionar esse código, também dentro das tags < head > < / head > do seu site. Como vamos inserir a máscara em todos os campos, nosso script vai ser mais ou menos assim:

<script type="text/javascript">
var $j = jQuery.noConflict();
// Use jQuery com a variavel $j para evitar conflitos entre plugins
$j(document).ready(function(){
$j("#data").mask("99/99/9999"); // onde #data é o id do campo
$j("#cep").mask("99.999-999"); // onde #cep é o id do campo
$j("#cpf").mask("999.999.999-99"); // onde #cpf é o id do campo
$j("#cnpj").mask("99.999.999/9999-99"); // onde #cnpj é o id do campo
$j("#telefone").mask("(99) 9999-9999"); // onde #telefone é o id do campo
});
</script>

Pronto, agora seus campos já estão pré-definidos e você vai obter dados padronizados do seu formulário, seja pra gravar em banco de dados ou receber por e-mail.

BÔNUS: Add máscara com jQuery para formatar valores

Passo 6: O plugin

Antes que me perguntem, vou mostrar aqui o bônus pra você que precisa adicionar a máscara com jQuery no input pra formatar valores monetários (R$ US$, etc), então pra isso, igual ao passo 2, vamos ter que carregar outro plugin do jQuery chamado de maskmoney.js, você pode fazer o download aqui ou então carregar direto do desenvolvedor.

<script type="text/javascript" src="https://raw.githubusercontent.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.min.js"></script>

Passo 7: HTML

Agora, vamos criar mais um input chamado valor e vamos inserir abaixo da linha 15 do passo 3, o código do campo ficou assim:

<!-- CAMPO VALOR -->
<label>Valor</label>
<input type="text" id="valor" />

Passo 8: inserindo a linha de script

Agora, no mesmo script do passo 4, você vai adicionar abaixo da linha 9, o seguinte código.

$j("#valor").maskMoney({prefix:'R$ ', thousands:'.', decimal:',', symbolStay: true}); // onde #valor é o id do campo, o simbolo da moeda é R$ e está marcado para exibir o símbolo na máscara

Dessa maneira seu input sempre vai exibir o símbolo R$ e também adicionar as vírgulas e pontos necessários no seu campo, lembrando que você pode alterar as opções do plugin, acesse o site do desenvolvedor e saiba mais

Clique aqui e veja o exemplo com maskmoney.js
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

FONTE: Masked Input
FONTE II: Mask Money

Agora terminamos de adicionar a máscara jQuery no input para formatar valores também, e você, o que achou do tutorial? Comente

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    2 respostas para Máscara com JQuery no input

    1. Jeferson escreveu em 5 de dezembro de 2014

      Cara ficou muito bom o tuto em…. parabéns

    2. Qcabeca escreveu em 7 de dezembro de 2014

      Obrigado Jeferson, sucesso ae. Abraço

    Envie seu comentário.

    Seu email não será publicado