19 de janeiro de 2007 Artigos

Máscaras Javascript em Campos de Formulário

Vou tentar, uma vez por semana, responder aqui a alguma dúvida de algum aluno dos cursos da Visie que seja útil para todo mundo. A de hoje: Javascript: máscara em campos de formulário simples e crossbrowser: Uma dúvida muito comum …

Por Elcio Ferreira

Vou tentar, uma vez por semana, responder aqui a alguma dúvida de algum aluno dos cursos da Visie que seja útil para todo mundo. A de hoje:

Javascript: máscara em campos de formulário simples e crossbrowser:

Uma dúvida muito comum diz respeito ao tratamento de teclas para campos de formulário. É um hábito de programadores de sistemas Desktop filtrar o que o usuário digita em campos como, por exemplo, data e CPF, permitindo apenas que ele digite número, e colocando automaticamente pontos, traços e outros separadores conforme ele digita. Ao tentar reproduzir esse comportamento na web, a experiência pode ser um tanto quanto frustrante, principalmente devido às diferenças entre o Internet Explorer e os outros navegadores. Além disso, a captura de eventos de teclado em Javascript é uma tarefa relativamente complicada. Por isso vou apresentar uma técnica alternativa, que não usa a captura de teclas.

Comentários aqui.

Roger W. Barros

Olá amigos.. a tempos que tento entender essas expressões regulares e não tem jeito, não entra na minha cabeça.

Eu preciso muito uma funçãozinha dessas pra formatar valores dessa maneira:

entrada ex.:
1222333
mascara:
R$ 1.222.333,00

Se alguém conseguir tirar esse fantasma da minha vida eu agradeço muuuuuiitooo!!! husauhsa
valeu!
Roger W. Barros

me encarnei nos exeplos dados aki e consegui fazer!!!!!

Já vou contribuir com uma mascara pra moeda!

function moeda(v) {
v=v.replace(/(\,\d{1,2})/,”"); // Remove “,??” (normalmente “,00″) no final para não atrapalhar
v=v.replace(/\D/g,”"); // Remove tudo o que não é dígito
v=v.replace(/^(0+)(\d)/g,”$2″); // Remove zeros à esquerda
v=v.replace(/(\d)(\d{3})$/,”$1.$2″); // Coloca um ponto entre o último e o penultimo bloco de 3 digitos
v=v.replace(/(\d)(\d{3}\.)/,”$1.$2″); // Após último bloco de 3 digitos substitui “????.” por “?.???.”
v=v.replace(/(\d)(\d{3}\.)/,”$1.$2″); // Após penultimo bloco de 3 digitos substitui “????.” por “?.???.”
v=v.replace(/^(\d)/g,”R$ $1″); // Coloca “R$ ” no começo
v=v.replace(/(\d{1,})$/,”$1,00″); // Coloca “,00″ no final
return v;
}

formata até 999 bilhões. para mais é só duplicar o código da 5ª linha.
ex.:
999999999999
fica assim:
R$ 999.999.999.999,00

http://elcio.com.br/ Elcio Ferreira

Excelente código, Roger! Obrigado por compartilhar. Adaptei para funcionar com centavos e formatar valores maiores:

function moeda(v) {
  v=v.replace(/\,0+$/,"") // Remove ,00 do final
  v=v.replace(/[^\d,]/g,"") // Remove tudo que não é dígito ou vírgula
  v=v.replace(/^0+/g,"")  // Remove zeros à esquerda
  if(v.indexOf(",")+1){
    v=v.replace(/(,\d)$/,"$10") // 2,5 se torna 2,50
  }else{
    v+=",00" // Acrescenta ,00 ao final dos inteiros
  }
  for(var i=0;i<10;i++)
    v=v.replace(/(\d)(\d{3}[\.,])/,"$1.$2") // Separador de milhar
  v="R$ "+v // R$ no começo
  return v;
}

Tricolor

Tenta colar um texto nos campos que deveriam aceitar somente números para ver o que acontece.
http://www.webtvindoor.com.br rodrigo

bixo sem comentarios. digo todos os comentarios .. cara simplesmente d++ vcs sao foda tava precisando de algumas ER’s que tava foda de aprender .. e tava aki em baixo do meu nariz poiaehfioaheipo vlw moçada
Edward

Caro Elcio,

Incluí as tuas funções em um arquivo anexo pra poder usar em todo o site sem ter que ficar repetindo as funções sempre que quizer usar. Tem um pequeno problema, no FF não funciona e diz que:
v_fun is not a function
[Break on this error] v_obj.value=v_fun(v_obj.value)

e no IE, quando eu digito algo mascarado, retorna [OBJECT] e não permite que eu digite mais nada. HELP MEEEEEEE!!!!!
Edinaldo

Bom essa código está bom
mas se o usuário copia e cola no campo ele aceita.. =/
http://br.linkedin.com/in/dmendonca Daniel Mendonça

Muito legal esse conteudo, porem hoje ja temos frameworks como o JQuery que possuem esses tipos de plug-ins e que funcionam muito bem, vale a pena usar quando necessario… Parabens
http://www.leialt.com.br Pablo

Muito bom Elcio, vai me ajudar muito. Agora, não querendo abusar, você poderia atualizar o post colocando valor monetário junto com os demais exemplos?
http://www.montepage.com.br Fernando

Eu preciso muito de uma função dessas para formatar, de forma que aceite uma placa de veículos, no formato AAA-9999, sendo que AAA só podem ser letras e 9999 somente números, o hífen deve ser inserido automaticamente, tentei fazer aqui e não consegui, alguém tem alguma idéia de como fazer?

Abraços e Obrigado pela ajuda.
Kívio

Muito obrigado pelas dicas. Tentei utilizar as funções, porém dentro de um apenas a função “soNumeros” funcionou. As outras eu preciso retirar do para funcionar. Tem alguma idéia do que seja?

Obrigado.
Brancorp2000

Cara, salvou minha vida!
Muito obrigado!

Deidvi Junio

formulário

http://entretenimentoemuitomais.blogspot.com/ Deidvi Junio

jah Resolvii… Mto Obrigado Colegas!! ESTAMOS À DISPOSIÇÃO AIII!!!
http://www.dgv.net.br Daniel Valente

Obrigado!

Procurava uma solução mais simples que o jquery.maskedinput.js pra utilizar junto com o smarty3 e que validasse em todos os browsers.

Só tive que fazer algumas alterações nas funções em conflito (mesma id).

Abraço

DGV
Victor F

Olá, bacana o js hein!!!
Dei uma misturada com OO e JQuery, pra utilizar ficaria App.aplicarMascaras();, segue abaixo.

var App = {
aplicarMascaras : function() {
$(“.numerico”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_APENAS_NUMEROS);
});
});
$(“.telefone”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_TELEFONE);
});
});
$(“.cpf”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_CPF);
});
});
$(“.decimal”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_DECIMAL);
});
});
$(“.data”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_DATA);
});
});
$(“.cep”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_CEP);
});
});
$(“.cnpj”).each(function() {
$(this).keypress(function() {
MascaraUtils.mascara(this, MascaraUtils.MASCARA_CNPJ);
});
});
}
};
var MascaraUtils = {
MASCARA_APENAS_NUMEROS : 1,
MASCARA_TELEFONE : 2,
MASCARA_CPF : 3,
MASCARA_DECIMAL : 4,
MASCARA_DATA : 5,
MASCARA_CEP : 6,
MASCARA_CNPJ : 7,
fn : null,
obj : null,
mascara : function(o, f) {
obj = o;
switch (f) {
case this.MASCARA_APENAS_NUMEROS:
fn = this.mascaraSoNumeros;
break;
case this.MASCARA_TELEFONE:
fn = this.mascaraTelefone;
break;
case this.MASCARA_CPF:
fn = this.mascaraCpf;
break;
case this.MASCARA_DECIMAL:
fn = this.mascaraDecimal;
break;
case this.MASCARA_DATA:
fn = this.mascaraData;
break;
case this.MASCARA_CEP:
fn = this.mascaraCep;
break;
case this.MASCARA_CNPJ:
fn = this.mascaraCnpj;
break;
}
setTimeout(“MascaraUtils.execmascara()”, 1);
},
execmascara : function() {
obj.value = fn(obj.value);
},
mascaraSoNumeros : function(v) {
return v.replace(/\D/g, “”);
},
mascaraTelefone : function(v) {
v = v.replace(/\D/g, “”);
v = v.replace(/^(\d\d)(\d)/g, “($1) $2″);
v = v.replace(/(\d{4})(\d)/, “$1-$2″);
return v;
},
mascaraCpf : function(v) {
v = v.replace(/\D/g, “”);
v = v.replace(/(\d{3})(\d)/, “$1.$2″);
v = v.replace(/(\d{3})(\d)/, “$1.$2″);
v = v.replace(/(\d{3})(\d{1,2})$/, “$1-$2″);
return v;
},
mascaraDecimal : function(v) {
var splitext = v.split(“”);
var revertext = splitext.reverse();
var v2 = revertext.join(“”);
v2 = v2.replace(/\D/g, “”);
v2 = v2.replace(/(\d{2})(\d)/, “$1,$2″);
v2 = v2.replace(/(\d{3})(\d)/, “$1.$2″);
v2 = v2.replace(/(\d{3})(\d)/, “$1.$2″);
v2 = v2.replace(/(\d{3})(\d)/, “$1.$2″);
splitext = v2.split(“”);
revertext = splitext.reverse();
v = revertext.join(“”);
return v;
},
mascaraData : function(v) {
v = v.replace(/\D/g, “”);
v = v.replace(/(\d{2})(\d)/, “$1/$2″);
v = v.replace(/(\d{2})(\d)/, “$1/$2″);
return v;
},
mascaraCep : function(v) {
v = v.replace(/\D/g, “”);
v = v.replace(/^(\d{5})(\d)/, “$1-$2″);
return v;
},
mascaraCnpj : function(v) {
v = v.replace(/\D/g, “”);
v = v.replace(/^(\d{2})(\d)/, “$1.$2″);
v = v.replace(/^(\d{2})\.(\d{3})(\d)/, “$1.$2.$3″);
v = v.replace(/\.(\d{3})(\d)/, “.$1/$2″);
v = v.replace(/(\d{4})(\d)/, “$1-$2″);
return v;
}
};

Abraço _o/
José Carlos

Elcio, o link postado acima está apontando para uma página de erro no seu site. Há alguma forma deu encontrar esse post sobre máscaras em outro link? Obrigado.
Luciney Magalhães

Me ajudou muito!
Obrigado!!!
Beatriz Marks

Poxa, muito legal, mas faltou você postar como se coloca a barra das datas automaticamente.

Talvêz seja só mudar uma coisinha nos códigos, mas para mim que sou principiante ja quebrei a cabeça e nada deu certo.

Mas as outras coisas todas funcionaram. Quando puderes posta um tuto de data!

Bjo
http://www.smartsoftms.com.br tiago

o campo cep, mesmo tendo a função para não aceitar letras, esta aceitando. poderia me ajudar em descobrir qual seria o erro, se é q tem erro, obrigado
Marcio Silva

Ajudou-me muito. Excelente publicação. Parabéns e sucesso.
Ale

O tutorial é simplesmente sensacional!!
Obrigada por compartilhar!!
Parabéns!!
Peward

Muito bacana. Obrigado! Apesar de muita gente não gostar de máscaras em formulários, tem muita gente que não segue a instrução do preenchimento: muita gente quer digitar ponto onde deveria ser traço e vice-versa. Sensacional para a organização dos dados. Estou quebrando a cabeça pra fazer uma máscara para nomes que permita a primeira letra caixa alta e o restante caixa baixa, a fim de evitar que a pessoa digite o nome só em caixa alta ou só em caixa baixa ou ainda misturando caixa alta e baixa. Fazer a função só com letras é fácil, mas do jeito que imaginei não tô conseguindo. Se puder dar uma força… Obrigado!
Magic Designer — Agência Web

Rapaz, aprimorei aqui seu código com algo bem simples e muito bonito e funcional…Para quem quiser usar…
Dois arquivos…
############################################################
primeiro o enviar.php
<?php//iremos declarar as variaveis que recebemos pelo método post//em alguns servidores nem precisamos declarar, depende do register_global=on ou =off// Criado por Magic Designer — Agência Web http://www.magicdesigner.com.br//agora vamos enviar todos esses dados usando a função mailmail("marcelo@magicdesigner:disqus .com.br","$Ligar","Nome: $nomeFone: $foneMensagem: $mensagem","FROM:$nome”);//agora vamos imprimir na tela o resultado ou a respostaecho “$nome, seu contato foi enviado com sucesso.Em breve Ligaremos para você.”;echo “Click aquipara voltar!”;?>
######################################################################
E agora nosso Form:
Nome: Telefone: () -
######################################################
Espero ter contribuído…
Qualquer coisa:
[email protected]
Fudencio

haha
cara, consegui mudar um codigo que vc postou pra telefone e fiz um pra data com dd/mm/aaa
nuss
ralei pakrai eu e um colega quebramo a cuca mas conseguimos
pra quem quiser ta ae…

OBS: vou passar só a parte da função data… o que vem antes vcs olhem no que o Elcio postou ensinando

function data(v){ v=v.replace(/D/g,”") //Remove tudo o que não é dígito v=v.replace(/^(d{2})(d)/,”$1/$2″) //Coloca barra entre o 2° e o 3° digito v=v.replace(/(d{2})(d)/,”$1/$2″) //Coloca barra entre o 4° e o 5° dígito return v}colocar este adicional na tag input…onkeypress=”mascara(this,data)”

configure a caixa na tag input tipo: id, size(ou style), etc e depois coloque o onkeypress…
abraço!!
VGs

muito obrigado pela ajuda

Tableless

Máscaras Javascript em Campos de Formulário

Mais artigos