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:

/**
 * 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;

}

Metodos de uso

Mascara para campos do tipo Data:

<input name="data" maxlength="10" onkeyup="AplicaMascara('XX/XX/XXXX', this);" type="text" />

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

Mascara para campos do tipo CEP:

<input name="cep" onkeyup="AplicaMascara('XXXX-XXX', this);" type="text" />  

Mascara para campos do tipo TELEFONE:

<input name="tel" onkeyup="AplicaMascara('(XX)XXXX-XXXX', this);" type="text" />  

Mascara para campos do tipo CPF:

<input name="cpf" onkeyup="AplicaMascara('XXX.XXX.XXX-XX', this);" type="text" />  

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

software engineer @hole19golf, #javascript #nodejs #ruby #java #php #scala #python

Twitter LinkedIn 

Be Sociable, Share!

Posts Relacionados:

One thought on “Trabalhando com Mascaras em Java Script

Leave a Reply

Your email address will not be published. Required fields are marked *