Máscara personalizada jQuery para oito e nove dígitos

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="https://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://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/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:

	// <![CDATA[
	jQuery(function($) {
	$.mask.definitions['~']='[+-]';
	//Inicio Mascara Telefone
	$('input[type=tel]').focusout(function(){
	var phone, element;
	element = $(this);
	element.unmask();
	phone = element.val().replace(/\D/g, '');
	if(phone.length > 10) {
	element.mask("(99) 99999-999?9");
	} else {
	element.mask("(99) 9999-9999?9");
	}
	}).trigger('focusout');
	//Fim Mascara Telefone
	$("#cpf").mask("999.999.999-99");
	$("#rg").mask("99.999.999-*");
	});
	// ]]>

view raw main.js hosted with ❤ by GitHub

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

See the Pen Show/Hide your Password by César Ribeiro (@chrdesigner) on CodePen.

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.