Mascara Javascript para os novos telefones de São Paulo

Olá pessoal,

“O presidente da Anatel (Agência Nacional de Telecomunicações), João Rezende, informou nesta sexta-feira que o acréscimo do nono dígito aos números de celulares da região metropolitana de São Paulo vai garantir 53 milhões de novas combinações numéricas.”
http://www1.folha.uol.com.br/mercado/1040493-nono-digito-garante-53-mi-de-novos-numeros-de-celular-em-sp.shtml

Sabendo disso, é importante começarmos a pensar em soluções para atender as mascaras de telefone de todo o Brasil e também para região metropolitana de São Paulo.

Já faz uns meses que falei sobre o  jQuery Mask Plugin. E desta vez, também vamos resolver este mesmo problema com o ele. Criei um exemplo no jsFiddle de como resolver da mascara javascript com o novo nono dígito nos telefones celulares de São Paulo. Você pode ver o exemplo funcionando aqui: http://jsfiddle.net/d29m6enx/2/

E o código é este:

// using jQuery Mask Plugin v1.7.5
// http://jsfiddle.net/d29m6enx/2/
var maskBehavior = function (val) {
 return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
options = {onKeyPress: function(val, e, field, options) {
 field.mask(maskBehavior.apply({}, arguments), options);
 }
};

$('.phone').mask(maskBehavior, options);

Desta forma, atendemos todos os números de telefone do Brasil e também atendemos a nova forma da Anatel para os telefones da região metropolitana de São Paulo, simples, certo? Ainda bem que tive a ideia de implementar estes eventos nas mascaras antes mesmo desta norma da Anatel 🙂

É isso, simples e objetivo!

UPDATE 10/10/2014

Eu e o @dgmike fizemos uma versão um pouco mais otimizada da solução apresentada pelo Bruno Porto em comentário:
http://jsfiddle.net/d29m6enx/2/

Ajudou? Ajude no desenvolvimento do jQuery Mask Plugin

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

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

Posts Relacionados: