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
(\___/)
( ͡ ͡° ͜ ʖ ͡ ͡°)
\╭☞ \╭☞ Follow me on Twitter!
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:
[javascript]
// 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);
[/javascript]
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
Igor Escobar 
@igor, tem como me ajudar?
LikeLike
Obrigado.
LikeLike
Só tem 1 problema…
Se vc gravar no banco sem formatação, você terá que limpar valor do campo antes de pegar o length dele.
var masks = [‘(00) 0000-00009’, ‘(00) 00000-0000’],
maskBehavior = function(val, e, field, options) {
var length = val.replace(/[()\-\s]+/g,”).length;
return length < 11 ? masks[0] : masks[1];
};
assim, quando vc embutir o valor no input apos retornar o valor do banco, ele terá 11 caracteres, pois não contará as mascaras….
LikeLike
@Bruno Sempre salve as informações no banco sem formatação, sempre. E não coloque isso no JavaScript. Este comportamento deve ser assegurado na camada de modelos da sua aplicação. Com relação ao problema que você mencionou, é só mudar a implementação da mascara… se vocês não conseguirem resolver nos próximos dias eu resolvo e posto aqui.
LikeLike
Conforme decisão da ANATEL, o nono dígito foi implantado no RJ também, mas não em todos os DDDs, portanto minha sugestão de Regex para mascarar corretamente o nono dígito é:
$(‘#campo_celular’).mask(‘(00) 0000-0000’,
{
onKeyPress: function(phone, e, currentField, options) {
var nonoDigito = phone.match(/^(\((1[23456789]|2[124])\) 9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g);
nonoDigito ? $(currentField).mask(‘(00) 00000-0000’, options) : $(currentField).mask(‘(00) 0000-0000’, options)
}
});
LikeLike
Deixo a sugestão de colocar esse update “http://jsfiddle.net/NJMSj/291/” no post principal. Fiquei a a tarde toda até fazer isso por conta e agora vim conferir para enviar a atualização e já estava feita nos comentários. Abraço.
LikeLike
Quando o campo vier de um banco de dados não formatado (somente números), altere essa linha:
return val.length > 14 ? masks[0] : masks[1];
POR
return val.length==11 || val.length > 14 ? masks[0] : masks[1];
Desse exemplo:
http://jsfiddle.net/NJMSj/350/
LikeLike
Resolvei postar o código pronto… já para uso também em TAGS HTML, no caso de só “exibir o campo”.
http://jsfiddle.net/NJMSj/465/
LikeLike
Muito obrigado mesmo cara! era exatamente o que faltava pra mim!
LikeLike
Essa é a minha versão, baseada na de vocês, enxuguei um pouco o código ao lado do @igorescobar
http://jsfiddle.net/dgmike/d29m6enx/1/
LikeLike
Parabéns pelo plugin, bem funcional e flexível…Muito obrigado, me economizou bastante tempo…
Precisei implementar a máscara para campos de Latitude e Longitude, caso alguém precise, segue meu código para exemplo:
$(“#txtLatitude, #txtLongitude”).mask(“~00.00######”, { ‘translation’ : { ‘~’ : { ‘pattern’ : /-/, optional : true } } } );
Se alguém precisar aumentar a as casas decimais é só adiciona “#” no final da máscara…
Implementei também o 9 digito, fiz uma implementação que não leva em consideração o DDD, pois em breve (2016 se não me engano) será adotado para todo o país. Segue exemplo:
var masks = [“(00) 0000-0000#”, “(00) 00000-0000”];
var celphoneOptions = {
onKeyPress: function(celphone){
mask = (celphone.length > 14) ? masks[1] : masks[0];
$(“#txtCelphone”).mask(mask, this);
}
};
$(“#txtCelphone”).mask(masks[0], celphoneOptions);
Espero ter ajudado, Valews…
LikeLike
Bom dia, nessa encontrada para resolver o problema dos telefones de SP, o plugin está com um comportamento estranho, impossibilitando que eu possa alterar ou navegar (com as setas do teclado) um número específico. Está sempre empurrando o cursor do teclado para o final do input. Alguém sabe como resolver isso?
att
LikeLike
Atualiza a versão. Obrigado por avisar!
LikeLike
Obrigado Igor, abraço!
LikeLike
Muito obrigado Igor,
Você salvou a minha tarde 🙂
LikeLike
Olá Igor, parabéns pelo plugin, é realmente ótimo! Em testes observei o seguinte no console do Firefox: “Eventos Mutation não devem mais ser usados. No lugar, use MutationObserver.” Suponho que o “DOMNodeInserted” não será mais suportado em breve nesse navegador. Você pensa em atualizar o código? Gostaria muito de usar em produção aqui, mas fiquei preocupado com esse detalhe… 😉
LikeLike
@Lee já voltei atrás com este cara, da uma olhada nas ultimas atualizações 😉
LikeLike
Valeu mesmo cara, me ajudou muito!
LikeLike
tem como forçar o nono digito ser somente o 9 quando for mascara de nove dígitos?
LikeLike
Igor, estou com um problema no firefox.
Usando para validar os campos HTML 5.
Ao usar as mascaras os inputs ficam com borda vermelha.
Pode me ajudar a resolver isso?
Obrigado.
LikeLike
como colocar essa solucao usando data-mask (data-mask-phone=true)?
$.validator.addMethod(“phone”,
function(value, element, param) {
…
return ???
}, “telefone erro”
);
LikeLike
Obrigado, ajudou muito!
LikeLike
Igor, boa tarde,
Estou utilizando seu plugin com AngularJS, utilizando diretiva retorno do tipo atributo, no html eu indico a mascara que quero utilizar, gostaria de saber como utilizar o reverse do plugin com diretivas do angular do tipo atributo
LikeLike
Obrigado por isso!
LikeLike
Como usar o código para enviar no submit do form sem a mascara…apenas os números.
No input (21) 99999-9999 , banco de dados receber apenas os números 21999999999
LikeLike