19/01/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

72 comentários
Tweet

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.

72 comentários

Por Elcio Ferreira

http://elcio.com.br/

Veja os outros posts de Elcio Ferreira

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<form name="form1" method="post" action="email.php">

  <table width="100" border="0" cellspacing="0" cellpadding="0" align="center">

    <tr bgcolor="#FFFF00"> 

      <td valign="top" width="100" nowrap><font class="texto">Nome:</font></td>

      <td> 

        <input class="form_campos" type="text" name="nome" size="23"/>

      </td>

    </tr>

    <tr bgcolor="#FFFF00"> 

      <td valign="top" width="100" nowrap><font class="texto">Telefone:</font></td>

      <td>

        <input id="itelefone" onkeypress="mascara(this,telefone)"  maxlength="14" /> 

      </td>

    </tr>

    <tr bgcolor="#FFFF00"> 

      <td valign="top" width="100" nowrap><font class="texto">E-mail:</font></td>

      <td> 

        <input class="form_campos" type="text" name="email" size="23"/>

      </td>

    <tr bgcolor="#FFFF00">

       <td valign="top" width="100" nowrap><font class="texto">Site:</font></td>

       <td>        

        <input id="isite" onkeyup="mascara(this,site)" value="http://" /> 

    </tr>

    <tr bgcolor="#FFFF00"> 

      <td valign="top" width="100" nowrap><font class="texto">Assunto:</font></td>

      <td> 

        <select class="form_campos" name="assunto">

          <option class="form_campos" value="Opinião" selected>Opinião</option>

          <option class="form_campos" value="Sugestão">Sugestão</option>

          <option class="form_campos" value="Parceria">Parceria</option>

          <option class="form_campos" value="Reclamação">Reclamação</option>

          <option class="form_campos" value="Outros">Outros</option>

        </select>

      </td>

    </tr>

    <tr bgcolor="#FFFF00"> 

      <td valign="top" width="100" nowrap><font class="texto">Mensagem:</font></td>

      <td> 

        <textarea class="form_campos" name="mensagem" cols="22" rows="6" size="auto"></textarea>

      </td>

    </tr>

    <tr bgcolor="#FFFF00"> 

      <td colspan="2" valign="middle"> 

        <br>

        <div align="center"> 

          <input class="form_botao" type="submit" name="Enviar" value="Enviar Mensagem">

          <input class="form_botao" type="reset" name="Limpar" value="Limpar">

        </div>

      </td>

    </tr>

  </table>

</form>

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!!

Artigos

Máscaras Javascript em Campos de Formulário

Por Elcio Ferreira

Nós fazemos

Posts recentes

Artigos

Máscaras Javascript em Campos de Formulário

Por Elcio Ferreira

Tag Cloud

Nós fazemos

Posts recentes