jQuery Mask – Máscaras para campos HTML utilizando 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.
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)
Exemplos:
– 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("***-****");
Resumo:
<input type="text" id="campoData">
<input type="text" id="campoTelefone">
<input type="text" id="campoSenha">
<script>
jQuery(function($){
$("#campoData").mask("99/99/9999");
$("#campoTelefone").mask("(999) 999-9999");
$("#campoSenha").mask("***-****");
});
</script>
Exemplo:
Para mais informações consulte o site do pluguin: https://digitalbush.com/projects/masked-input-plugin/
Gostou? Compartilhe!
Postado por tpastorello
Show de bola o tuto….
Parabéns.
Vc já tentou aplicar este recurso de máscara em custom field do WordPress?
Já sim, não muda nada o fato de ser em WordPress.
E ai fera?
Cara curti muito a dica porém não estou conseguindo fazê-la funcionar…
Peço para exibir o codigo fonte, copio o mesmo e salvo em documento “.html” e abro a documento no Chrome e as máscaras não funcionam…
Teria como você me ajudar?
Boa noite,
como utilizar na seguinte situação?
eu tenho um campo que vai receber valor de salario:
vou colocar a mascara “999.999,99”
porem se usuario tentar digitar 99,99 a mascara nao vai permitir.
tem como corrigir isto?
Obrigado!
Tem, dá um aumento pro champz
assadasasads
?
N estou conseguindo, como eu instalo esse Plugin
Olá Paulo.
Para instalar o plugin você deve fazer o downlod e depois fazer as referencias no
veja mais em: https://digitalbush.com/projects/masked-input-plugin/
legal! parabéns!
Valeu, boa dica!
Dúvida: Agora com o nono dígito em alguns números de SP preciso fazer com que aceite oito ou nove digitos no mesmo campo. Poderia ajudar?
olá romeu.
para fazer aceitar oito ou nove digitos você deverá tratar em uma função separada fazendo essa validação. somente na máscara acho que não é possível.
para inserir um digito a mais, basta colocar:
$(‘.mascaraData’).mask(“(99) 9999-9999?9”);
Sendo que o digito a mais será no fim do número e é opcional.
Essa foi a solução que usei.
Man, Te amo, salvou minha vida
Muito legal o post. Estou com uma dúvida. Como eu faço para a máscara aceitar estes dois formatos de telefone?
“(99) 9999-9999” e “(99) 99999-9999”
Para o caso dos telefones da cidade de São Paulo.
Olá Diogo.
Para isso você vai ter que fazer uma regra, que ao escolher o estado de são paulo a máscara aplicada seja diferente, não é possível aplicar a mesma máscara para as duas situações. Alguma coisa parecida com isto:
if($(‘#uf’).val()==”SP”){
$(“#campoTelefone”).mask(“(99) 99999-9999”);
}else{
$(“#campoTelefone”).mask(“(99) 9999-9999”);
}
att;
Eu usaria a máscara para telefone assim:
$(“#campoTelefone”).mask(“(99) ?9999-9999″);
Diogo, eu faço da seguinte forma para máscarar meu campo de acordo com o novo padrão para celulares:
$(‘#telefone’).focusin(function(){
$(‘#telefone’).mask(“(99) 99999999?9″);
});
$(‘#telefone’).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’);
Espero ajudá-lo.
ótimo José.
Acho que vou até atualizar a matéria. haha.
abraço
Na sua linha: phone = element.val().replace(/\D/g, ”);
o que significa aquela aspas duplas no final?
Bom plugin, mas tenho uma duvida, como trataria um campo onde só é permitido “alfha”(letras).
Olá, tenho um campo nota que estou aplicando essa máscara, porém estou com um problema. Só estou conseguindo colocar a máscara dessa forma “999.99” ou “99.99”, porém como se trata de um campo nota eu queria a seguinte regra se o usuário digitar 100.00 aplicar uma máscara, se o usuário digitar 67.76 aplicar outra máscara. Tenho que criar uma função pra tratar essa máscara?
é o que todos nos procuramos, simples e funcional! PARABÉNS!
Por que o CTRL V não funciona nesses campos com máscara?
Oi Nelson, estou com mesmo problema. Como vc resolveu?
Ola, legal como eu posso usar esse recurso para moeda, estou usando o number format que funciona bem. Eu quero colocar esse recurso no campo de forma que os valores conforme digitados apareçam no formato de moeda é possível?
Olá amigo, obrigado pelo plugin! MUITO SHOW DE BOLA E facíiiiiiiiiilimo de usar! Resolve realmente a chatisse de ficar criando várias mascaras com funções malucas que sempre dão problema =D
Eu li os posts e posso ter papado mosca, mas estava com uma dificuldade para retornar valor no campo que eu apliquei a mascara.
Então caso algum programador esteja levando esta coça tb, deixo a dica de usar o jQuery mesmo.
Tipo:
//aplicando a mascara no campo input com id input-data-inicio
$(“#input-data-inicio”).mask(“99/99/9999”);
Para retornar o valor no campo eu usei o .val() do próprio jQuery
$(“#input-data-inicio”).val(“”);
Eu uso PHP, mas creio que nas outras linguagens será fácil de retornar da mesma forma, basta usar a sintaxe desejada
Obrigado e parabéns pelo trabalho!
Comigo está ocorrendo o seguinte erro. Em um input com máscara 99/99/9999, quando digito a data ele vai adicionando um “_” ficando assim: _1/_1/_1_1.
Sabe o que pode estar ocorrendo?
Cara,
ótimo tutorial, parabéns!
Porém estou com um probleminha.Se meu campo está preenchido e com o atributo readonly=true, ainda está sendo possivel alterar os dados do campo, bem como apagar!
Isto só acontece em campos que utilizam mascara.
Se possivel, teste e me dê um feedback se acontece o mesmo com vc!
valeu Abraços
jQuery(function($)
{
$(‘#cur_telefone’).focusin(function()
{
$(‘#cur_telefone’).val(”);
$(‘#cur_telefone’).unmask();
});
$(‘#cur_telefone’).focusout(function()
{
if($(this).val().length > 8)
{
$(“#cur_telefone”).mask(“99999-9999”);
}
else
{
$(“#cur_telefone”).mask(“9999-9999”);
console.log($(“#cur_telefone”).val());
}
});
});
<script> jQuery(function($) { $('#cur_telefone').focusin(function() { $('#cur_telefone').val(''); $('#cur_telefone').unmask(); }); $('#cur_telefone').focusout(function() { if($(this).val().length > 8) { $("#cur_telefone").mask("99999-9999"); } else { $("#cur_telefone").mask("9999-9999"); console.log($("#cur_telefone").val()); } }); }); </script>jQuery(function($)
{
$(‘#cur_telefone’).focusin(function()
{
$(‘#cur_telefone’).val(”);
$(‘#cur_telefone’).unmask();
});
$(‘#cur_telefone’).focusout(function()
{
if($(this).val().length > 8 )
{
$(“#cur_telefone”).mask(“99999-9999”);
}
else
{
$(“#cur_telefone”).mask(“9999-9999”);
console.log($(“#cur_telefone”).val());
}
});
});
<script> jQuery(function($) { $('#cur_telefone').focusin(function() { $('#cur_telefone').val(''); $('#cur_telefone').unmask(); }); $('#cur_telefone').focusout(function() { if($(this).val().length > 8 ) { $("#cur_telefone").mask("99999-9999"); } else { $("#cur_telefone").mask("9999-9999"); console.log($("#cur_telefone").val()); } }); }); </script>Muito útil!!
Obrigado pela ajuda, amigo.
Ótima contribuição.
Parece que estou deixando passar alguma coisa importante.
Tudo funciona na minha aplicação, desde que eu use as definições do tipo ($(“#campoData”).mask(“99/99/9999”);) debaixo de ($(document).ready(function(){ ).
Isto funciona bem quando eu sei de antemão quais são as máscaras que vou usar.
No entanto, eu quero passar máscaras diferentes para o mesmo campo, dependendo do valor do mesmo.
Pelo que entendi, preciso passar a máscara pelo HTML, usando (.
Isto não está funcionando comigo. Alguma sugestão?
Desde já agradeço e obrigado.
Retificando: … usando o campo ‘data-mask’ …
Olá.
Qual é o download que tem que ser feito? Não encontro o link…..
Obrigado!
PARABENS!
perfeito!
amigos, agora preciso formatar os campos exibidos na grade … nao ‘e entrada (input) e’ apenas formatar os campos que vem do banco para exibili-los numa grade de consulta…
existe uma biblioteca jquery pra isso???
aguardo e agradeco a dicas
PARABENS!!!
Ótima a explanação sobre o uso de máscaras, mas como faria se só quisesse letras maiúsculas?
Uma máscara para receber até 5 letras maiúsculas, por exemplo
Mauro,
Para deixar tudo em Maiúsculo, você pode tentar:
$(“#nome_do_campo”).keyup(function(){$(“#nome_do_campo”).val($(“#nome_do_campo”).val().replace(/([a-z-çáàãâäéèẽêëíìĩîïóòõôöúùũûü])/,function(s){return s.toUpperCase();}))});
$(“#nome_do_campo”).keypress(function(){$(“#nome_do_campo”).val($(“#nome_do_campo”).val().replace(/([a-z-çáàãâäéèẽêëíìĩîïóòõôöúùũûü])/,function(s){return s.toUpperCase();}))});
E para aceitar aceitar somente os 05 (cinco) caracteres:
$(“#nome_do_campo”).mask(“aaaaa”);
equipe http://www.evomaq.com.br agradece ;D 😀
Máscara genérica para campos numéricos em JavaScript: https://goo.gl/otlbMl
Parabéns pelo conteúdo. Bem explicado e objetivo.
Show de bola, obrigado por compartilharem!
Muito obrigado amigo!
Muito boa sua dica. Muito bom mesmo.
É possível realizar este mesmo processo com MVC Asp.Net C# ???
@Html.EditorFor(model => model.Telefone)
@Html.ValidationMessageFor(model => model.Telefone)
É possível realizar este mesmo processo com MVC Asp.Net C# ??? – See more at: https://vinteum.com/jquery-mask-mascaras-para-campos-html-utilizando-jquery/#comment-50118
Gostei muito do plugn, mas usei ele em um site, e percebi que no meu celular ele n pegou, ele fica empurrando a mascara, saberias dizer o porquê disso…
Meu celular é um Xperia E1