Trabalhando com Mascaras em Java Script

Recentemente, tive problemas com algumas funções já disponíveis na internet para poder facilitar a aplicação de mascaras em campos do tipo string.

Por exemplo: o cliente precisava que no momento que eu fosse digitando a data no formato (00/00/000) o sistema automaticamente, iria colocando as barras “/” para facilitar o preenchimento do campo.

Baseando-se neste ,desenvolvi uma função em JavaScript para aplicar qualquer tipo de mascara que você precisar basta informar o template da mesma:
[javascript]
/**
* Formata o Campo de acordo com a mascara informada.
* Ex de uso: onkeyup="AplicaMascara(’00:00:00′, this);".
* @author Igor Escobar (blog@igorescobar.com)
* @param Mascara String que possui a mascara de formatação do campo.
* @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
* @returns {void}
*/
function AplicaMascara(Mascara, elemento){

// Seta o elemento
var elemento = (elemento) ? elemento : document.getElementById(elemento);
if(!elemento) return false;

// Método que busca um determinado caractere ou string dentro de uma Array
function in_array( oque, onde ){
for(var i = 0 ; i < onde.length; i++){
if(oque == onde[i]){
return true;
}
}
return false;
}
// Informa o array com todos os caracteres que podem ser considerados caracteres de mascara
var SpecialChars = [‘:’, ‘-‘, ‘.’, ‘(‘,’)’, ‘/’, ‘,’, ‘_’];
var oValue = elemento.value;
var novo_valor = ”;
for( i = 0 ; i < oValue.length; i++){
//Recebe o caractere de mascara atual
var nowMask = Mascara.charAt(i);
//Recebe o caractere do campo atual
var nowLetter = oValue.charAt(i);
//Aplica a masca
if(in_array(nowMask, SpecialChars) == true && nowLetter != nowMask){
novo_valor += nowMask + ” + nowLetter;
} else {
novo_valor += nowLetter;
}
// Remove regras duplicadas
var DuplicatedMasks = nowMask+”+nowMask;
while (novo_valor.indexOf(DuplicatedMasks) >= 0) {
novo_valor = novo_valor.replace(DuplicatedMasks, nowMask);
}
}
// Retorna o valor do elemento com seu novo valor
elemento.value = novo_valor;

}
[/javascript]

Metodos de uso

Mascara para campos do tipo Data:
[html]<input name="data" maxlength="10" onkeyup="AplicaMascara(‘XX/XX/XXXX’, this);" type="text" />[html]

<strong> Mascara para campos do tipo Hora:</strong>
[html]<input name="hora" maxlength="8" onkeyup="AplicaMascara(‘XX:XX:XX’, this);" type="text" /> [/html]

Mascara para campos do tipo CEP:
[html]<input name="cep" onkeyup="AplicaMascara(‘XXXX-XXX’, this);" type="text" /> [/html]

Mascara para campos do tipo TELEFONE:
[html]<input name="tel" onkeyup="AplicaMascara(‘(XX)XXXX-XXXX’, this);" type="text" /> [/html]

Mascara para campos do tipo CPF:
[html]<input name="cpf" onkeyup="AplicaMascara(‘XXX.XXX.XXX-XX’, this);" type="text" /> [/html]

E por ai vai, basta seguir os exemplos e ser feliz Espero ter contribuído!
[]’s