Fazer máscaras em javascript é sempre chato e trabalhoso. Para cada máscara do sistema deve-se criar uma função javascript e utilizá-la no sistema. A algum tempo criei uma função javascript que funciona para a grande maioria das mascaras que são utilizadas no sistema. A função é mostrada abaixo:
/**
* Funcao de mascara. Esta funcao recebe como parametro o campo (this) no qual a
* mascara sera aplicada, o formato da mascara (99/99/9999), o conteúdo (1
* numeros, 2 letras e 3 letras e numeros) e o evento passa-se o this.
*/
function mask(campo, formato, conteudo, event) {
valor = campo.value;
var i, j;
var caracs = [ '.', '/', '-', ':', '(', ')', ',' ];
var auxPonto = formato;
var auxBarra = formato;
var auxHifen = formato;
var auxDblPonto = formato;
var auxAbrePar = formato;
var auxFechaPar = formato;
var auxVirgula = formato;
var tamanho = formato.length;
var posPonto = new Array(tamanho);
var posBarra = new Array(tamanho);
var posHifen = new Array(tamanho);
var posDblPonto = new Array(tamanho);
var posAbrePar = new Array(tamanho);
var posFechaPar = new Array(tamanho);
var posVirgula = new Array(tamanho);
var keyPress = event;
campo.maxLength = tamanho;
if (event.keyCode != 17) {
switch (conteudo) {
case 1: // Verifica se soh podem ser entrados valores numericos
if (!(event.keyCode >= 48 && (event.keyCode <= 57)))
event.keyCode = 0;
break;
case 2: // Somente Letras
if (!((event.keyCode >= 97 && event.keyCode <= 122)
|| event.keyCode >= 65
&& event.keyCode <= 90))
event.keyCode = 0;
break;
case 3: // Letras e numeros
if (!((event.keyCode >= 48 && event.keyCode <= 57)
|| (event.keyCode >= 97 && event.keyCode <= 122)
|| (event.keyCode >= 65 && event.keyCode <= 90)))
event.keyCode = 0;
break;
}
}
// ----------------------------- PEGA A FORMATACAO DA MASCARA
// ------------------
for (i = 0; i < tamanho; i++) {
posPonto[i] = auxPonto.indexOf('.');
posBarra[i] = auxBarra.indexOf('/');
posHifen[i] = auxHifen.indexOf('-');
posDblPonto[i] = auxDblPonto.indexOf(':');
posAbrePar[i] = auxAbrePar.indexOf('(');
posFechaPar[i] = auxFechaPar.indexOf(')');
posVirgula[i] = auxVirgula.indexOf(',');
auxPonto = auxPonto.substring(posPonto[i] + 1, tamanho);
auxBarra = auxBarra.substring(posBarra[i] + 1, tamanho);
auxHifen = auxHifen.substring(posHifen[i] + 1, tamanho);
auxDblPonto = auxDblPonto.substring(posDblPonto[i] + 1, tamanho);
auxAbrePar = auxAbrePar.substring(posAbrePar[i] + 1, tamanho);
auxFechaPar = auxFechaPar.substring(posFechaPar[i] + 1, tamanho);
auxVirgula = auxVirgula.substring(posVirgula[i] + 1, tamanho);
if (i > 0) {
posPonto[i] = posPonto[i] + posPonto[i - 1];
posBarra[i] = posBarra[i] + posBarra[i - 1];
posHifen[i] = posHifen[i] + posHifen[i - 1];
posDblPonto[i] = posDblPonto[i] + posDblPonto[i - 1];
posAbrePar[i] = posAbrePar[i] + posAbrePar[i - 1];
posFechaPar[i] = posFechaPar[i] + posFechaPar[i - 1];
posVirgula[i] = posVirgula[i] + posVirgula[i - 1];
posPonto[i] = posPonto[i] + 1;
posBarra[i] = posBarra[i] + 1;
posHifen[i] = posHifen[i] + 1;
posDblPonto[i] = posDblPonto[i] + 1;
posAbrePar[i] = posAbrePar[i] + 1;
posFechaPar[i] = posFechaPar[i] + 1;
posVirgula[i] = posVirgula[i] + 1;
}
}
// Retirando a máscara
for (i = 0; i < campo.value.length; i++) {
valor = valor.replace('-', '');
valor = valor.replace('(', '');
valor = valor.replace(')', '');
valor = valor.replace(':', '');
valor = valor.replace('/', '');
valor = valor.replace('.', '');
valor = valor.replace(',', '');
}
// Faz a validação se for apenas número
// utilizado para fazer a validação de Ctrl+V
if (conteudo == 1) {
if (isNaN(valor)) {
if (isNaN(valor.charAt(valor.length - 2)))
valor = "";
else
valor = valor.substring(0, valor.length - 1);
}
}
indicePonto = 0;
indiceBarra = 0;
indiceHifen = 0;
indiceDblPonto = 0;
indiceVirgula = 0;
indiceAbrePar = 0;
indiceFechaPar = 0;
// Varre o campo aplicando a máscara
for (i = 0; i < valor.length; i++) {
if (i == posPonto[indicePonto]) {
if (valor.charAt(i) != '.') {
if (i == 0) {
valor = '.' + valor;
} else if (i == valor.length) {
valor = valor + '.';
} else {
valor = valor.substring(0, i) + '.' + valor.substring(i);
}
indicePonto++;
}
}
if (i == posBarra[indiceBarra]) {
if (valor.charAt(i) != '/') {
if (i == 0) {
valor = '/' + valor;
} else if (i == valor.length) {
valor = valor + '/';
} else {
valor = valor.substring(0, i) + '/' + valor.substring(i);
}
indiceBarra++;
}
}
if (i == posHifen[indiceHifen]) {
if (valor.charAt(i) != '-') {
if (i == 0) {
valor = '-' + valor;
} else if (i == valor.length) {
valor = valor + '-';
} else {
valor = valor.substring(0, i) + '-' + valor.substring(i);
}
indiceHifen++;
}
}
if (i == posDblPonto[indiceDblPonto]) {
if (valor.charAt(i) != ':') {
if (i == 0) {
valor = ':' + valor;
} else if (i == valor.length) {
valor = valor + ':';
} else {
valor = valor.substring(0, i) + ':' + valor.substring(i);
}
indiceDblPonto++;
}
}
if (i == posAbrePar[indiceAbrePar]) {
if (valor.charAt(i) != '(') {
if (i == 0) {
valor = '(' + valor;
} else if (i == valor.length) {
valor = valor + '(';
} else {
valor = valor.substring(0, i) + '(' + valor.substring(i);
}
indiceAbrePar++;
}
}
if (i == posFechaPar[indiceFechaPar]) {
if (valor.charAt(i) != ')') {
if (i == 0) {
valor = ')' + valor;
} else if (i == valor.length) {
valor = valor + ')';
} else {
valor = valor.substring(0, i) + ')' + valor.substring(i);
}
indiceFechaPar++;
}
}
if (i == posVirgula[indiceVirgula]) {
if (valor.charAt(i) != ',') {
if (i == 0) {
valor = ',' + valor;
} else if (i == valor.length) {
valor = valor + ',';
} else {
valor = valor.substring(0, i) + ',' + valor.substring(i);
}
indiceVirgula++;
}
}
}
if (campo.value.length > tamanho) {
campo.value = campo.value.substring(0, tamanho);
}
campo.value = valor;
}
Segue abaixo um exemplo de como utilizar a função:
Para a máscara pode se passar qualquer mascara que possua os caracteres (ponto, barra, menos, dois pontos, virgula, e abre e fecha parenteses. Os valores que são passados entre os caracteres acima serão desconsiderados, então tanto faz colocar 999.999.999-99 quanto 111.111.111-11. Espero que esta máscara ajude vcs assim como vem me ajudando durante este longo período de desenvolvimento.
É isto aí pessoal. Qualquer problema mandem mensagem.
É isto aí pessoal. Qualquer problema mandem mensagem.

Valeu Samuel!! muito bom mesmo!!
ResponderExcluirJá estou usando.
Mas uma dúvida.. se eu quiser dentro da máscara colocar uma letra. Tipo mascara de moeda
seria
R$ 99.999,99
mas o R$ não entra normalmente... como seria?
Olá,
ResponderExcluirNeste caso vc vai ter que fazer alguma customização no javascript, porque a função só reconhece os caracteres '.', '/', '-', ':', '(', ')', ',' como máscara. Minha sugestão é colocar o R$ antes do campo e não dentro dele. Algumas pessoas colocam entre parêntese ao lado do nome para indicar a unidade de medida.
Qualquer problema avise...
[]s,