Um método realmente fácil de utilizar máscaras em campos HTML com jQuery é o pluguin Masked Input Pluguin, basta informar um simples comando para criar a máscara.
Baixar plugin 1.4.1 Minificado: Clique Aqui
Para construir as máscaras temos as seguintes regras:
a – Representa um caractere alfabético (AZ, az)
9 – Representa um carácter numérico (0-9)
* – Representa um caractere alfanumérico (AZ, az ,0-9)
Como usar:
Primeiro, inclua os arquivos jQuery e Masked:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.min.js" type="text/javascript"></script>
Em seguida, chame a função de máscara para os itens que você deseja ter mascaras.
jQuery(function($){ $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"}); $("#phone").mask("(999) 999-9999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999"); });
Opcionalmente, se você nao estiver satisfeito com o caractere de sublinhado (‘_’) como um espaço reservado, você pode passar um argumento opcional.
jQuery(function($){ $("#product").mask("99/99/9999",{placeholder:" "}); });
Opcionalmente, se você deseja executar uma função uma vez que a máscara foi completada, você pode especificar essa função.
jQuery(function($){ $("#product").mask("99/99/9999",{completed:function(){alert("Você digitou o seguinte: "+this.val());}}); });
Você pode fornecer suas próprias definições de máscara.
jQuery(function($){ $.mask.definitions['~']='[+-]'; $("#eyescript").mask("~9.99 ~9.99 999"); });
Você pode fazer parte de sua máscara ser opcional. Sua regra listada após ‘?’ dentro da máscara é considerada a entrada opcional do usuário. O exemplo comum para isso é o número de telefone + extensão opcional.
jQuery(function($){ $("#phone").mask("(999) 999-9999? x99999"); });
Exemplos Básico:
– Para um campo tipo data precisamos de uma máscara no formato DD/MM/AAAA. Como só é necessário utilizar números vamos informar o ‘9’ para fazer a regra. A referência ao campo HTML é feita através da propriedade “ID”.
<input type="text" id="campoData">
Neste caso o comando que informa a máscara será:
$("#campoData").mask("99/99/9999");
– Um campo para informar telefone no formato (DDD) 1234-1234
Campo:
<input type="text" id="campoTelefone">
Máscara:
$("#campoTelefone").mask("(999) 9999-9999");
– Supondo há necessidade de uma máscara para utilizar todos os tipos de caractéres no formato XXX-XXXX:
Campo:
<input type="text" id="campoSenha">
Máscara:
$("#campoSenha").mask("***-****");
Exemplo Avançado:
Suponhamos que nosso campo receberá o número de telefone no padrão do Brasil, número fixo com 8 dígitos e celulares com 9 dígitos.
Nossa mascara seguiria o seguinte critério:
Telefone Fixo: (99) 9999-9999
Telefone móvel: (99) 9 9999-9999
Máscara:
jQuery(function($){ jQuery("input.telefone") .mask("(99) 9999-9999?9") .focusout(function (event) { var target, phone, element; target = (event.currentTarget) ? event.currentTarget : event.srcElement; phone = target.value.replace(/\D/g, ''); element = $(target); element.unmask(); if(phone.length > 10) { element.mask("(99) 9 9999-999?9"); } else { element.mask("(99) 9999-9999?9"); } }); });
Campo:
<input type="text" name="" placeholder="Digite aqui seu telefone..." class="telefone">
Obs: Input com a class ‘telefone’ acionará a função.