Como colocar máscaras em input HTML com Jquery

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.

Junte-se a nós e esteja sempre atualizado com as últimas novidades e dicas