Olá pessoal hoje, eu vou mostrar para vocês como aplicar uma máscara personalizada jQuery para oito e nove dígitos, como muitos já sabem em alguns estados Brasileiros foi aplicado o nono dígito para celulares, mas ainda existe muitos lugares que não adquiriu esse novo dígito, então eu decidi mostra para vocês como fazer essa máscara personalizada que aceita 8 ou 9 digítos.

Primeiro de tudo, para que esse tutorial funcione corretamente, vocês vão precisar ter a biblioteca do jQuery declarada em seu site:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Agora que já temos já a biblioteca do jQuery vamos colocar o jQuery Masked Input, esse jQuery é muito utilizado para a finalidade de aplicação de máscaras em formulários como por exemplo em Telefone, Celular, CPF, RG, CEP, CNJP, etc…

Vamos aplicar o jQuery Masked Input abaixo do jQuery:

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

Eu vou criar um formulário de exemplo somente com quatro campos Nome, Celular, RG e CPF:

<ul>

<li><label for="nome">Nome: </label><input type="text" id="nome" /></li>

<li><label for="celular">Celular: </label><input type="tel" id="celular" /></li>

<li><label for="rg">RG: </label><input type="text" id="rg" /></li>

<li><label for="cpf">CPF: </label><input type="text" id="cpf" /></li>

<li class="button"><button>Enviar</button></li>

</ul>

Pronto, com o nosso formulário criado vamos aplicar as máscaras, no campo do #celular e de bônus para vocês eu vou dar exemplo de como aplicar mais duas mascáras uma no campo do #RG e a outra no #CPF também:

Como vocês podem ver, da linha 5 até a 15 eu fiz a aplicação da máscara no input[type=tel], ele vai criar uma máscara com o padrão de (DDD) e 8 digitos com a separação de 4 caracteres para cada lado, mas quando houver o nono carácter então ficará 4 caracteres do lado esquerdo e 5 do lado esquerdo ele ficará com essa aparência (99) 9999-99999.

No campo de RG é um pouco dirente porque existe alguns RG que podem tem um carácter no último campo por isso que eu tive que adicionar o *, então ela ficará da seguinte maneira 99.999.999.*.

Já na parte do CPF eu determinei quando for o ID #cpf ela ficará da seguinte maneira 999.999.999-99.

Importante: A máscara é aplica por TYPE, CLASS e por ID. Vocês podem usar qualquer dessas três opções, o mais importante é o jeito que tem que criar a máscara, ele sempre tem que ser criada com o dígito 9.

Exemplo:

CPF: 999.999.999-99
RG: 99.999.999-*
Telefone: (99) 9999-9999
CNPJ: 99.999.999/9999-99

Para que fique mais simples para visualizar acessem o link de exemplo e também estou deixando dísponivel para download esse tutorial logo abaixo:

Exemplo – Máscara em jQuery para oito e nove dígitos

Download – Máscara em jQuery para oito e nove dígitos

Espero que vocês tenham gostado deste post e até breve, por favor se gostou compartilha o post e se tiver dúvida ou sugestão, por favor deixe um comentário. Até Mais…

PS.: Esse post foi editado por causa da pergunta do Matheus de como era para adicionar um carácter ter no campo do RG.

César Ribeiro
Written by

Hi, my name’s Cesar H. Ribeiro, I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, I’m Web Developer Freelancer, my main specialty is deploying custom Web Sites using the WordPress platform with base, transforming PSD/Layouts for Custom Themes. In feel years with Developer Freelancer, I worked with many agencies around the world like: Brazil, Australia, USA, Germany and Austria.

Related Posts