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/NJMSj/30/
E o código é este:
$('.sao_paulo_phone_number').mask('(00) 0000-0000',
{onKeyPress: function(phone, e, currentField, options){
var new_sp_phone = phone.match(/^(\(11\) 9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g);
new_sp_phone ? $(currentField).mask('(00) 00000-0000', options) : $(currentField).mask('(00) 0000-0000', 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 19/11/2012
Se você está querendo aplicar a masca e precisa de alguma forma recuperar a informação como em um form de edição ou algo do tipo, você precisa verificar qual a mascara aplicar antes de formatar o campo.
// jQuery Mask Version: v0.5.0+
var SPphoneMask = function(phone, e, currentField, options){
return phone.match(/^(\(?11\)? ?9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g) ? '(00) 00000-0000' : '(00) 0000-0000';
};
$(".sp_celphones").mask(SPphoneMask, {onKeyPress: function(phone, e, currentField, options){
$(currentField).mask(SPphoneMask(phone), options);
}});
Com a versão 0.5.0+ do jQuery Mask Plugin, você consegue passar uma função para dentro do plugin, desta forma o plugin se encarrega de resolver qual é a mascara mais adequada a ser aplicada para cada cenário analisando primeiro o conteúdo que já tem no campo e depois aplica a mascara. Em caso do usuário mudar o valor do campo ele vai re-avaliando o conteúdo do campo conforme o usuário vai digitando.
[]‘s
Igor.
software engineer @ grupo abril, #javascript #nodejs #ruby #php #zce #musician #skater
Também precisa dar um jeito de também encaixar telefones fixos. Mesmo com DDD 11, eles continuam com 8 dígitos.
Eu *forqueei* o seu fiddle e dei um jeitinho nisso: http://jsfiddle.net/xZSF2/1/
É verdade, a resolução serve somente para telefones celulares, porém, o seu fork só resolve para telefones celulares que começam com 9. Telefones celulares começam com 7,8 e 9.
Mas agora todos os celulares começam com 9, não? O meu, por exemplo, começava com 7 (7999-…); agora começa com 9 (97999-…).
A expressão ficou assim:
\(11\) 9(9|8|7)).+/i
Ou seja, se você digitar o celular já com o novo digito, ele vai considerar a regra somente a partir do segundo digito após o nono dígito. Celulares que começam com 9, 8 e 7 também vai aderir a nova mascara. Alterei o link do fiddle no post e da para você ver funcionando.
Só não está funcionando com mais de um elemento, tem como ver isso??
@diego Foi só um exemplo
Para funcionar com mais de um campo o exemplo tem que ser mais elaborado:
var options = {onKeyPress: function(phone, e){
$target = “.” + $(e.target).closest(‘input’).attr(‘class’);
if(/(\(11\) 9(9|8|7)).+/i.test(phone)){
$($target).mask(‘(00) 00000-0000′, options);
} else {
$($target).mask(‘(00) 0000-0000′, options);
}
}};
$(‘.sao_paulo_phone_number’).mask(‘(00) 0000-0000′, options);
$(‘.sao_paulo_phone_number2′).mask(‘(00) 0000-0000′, options);
Beleza cara, é que voce estava usando um seletor de classe, mas di boa, ótimo trabalho voce fez com esse plugin, está sendo muito útil, parabéns!
Só pra tirar uma dúvida mesmo, no de voces funcionou no IE 8? Aqui não.
Só para agregar ai, existem celulares de são paulo da tim que começavam com 5 tambem.
Trabalhei em algumas melhorias no plugin esta noite, já deu pra ver que o código já ficou diferente e agora vocês não teram mais problemas com seletores de classes etc.
Tive que usar o target no exemplo anterior para “driblar” uma limitação que encontrei decorrente destas necessidades no callback. Agora ficou show
Igor,
Para nosso desespero parece que não são só os 7|8|9. Os 5|6 também entram, sendo que tem 5 que não entra, e ainda tem o 77 e 78 que não entram na nova regra. Ô ANATEL sacana =/
http://blog.thiagorodrigo.com.br/index.php/prefixos_das_operadoras_de_celular_em_sp
@Dentxinho
Fiz uma alteração no código do post e no jsfiddle, pode estar que eu acho que agora ficou redondo
como que eu faco para usar essa mascara chamando a funcao no onkeypress?!?!? como ficaria a funcao no arquivo js?!?!?! obrigado…
Você pode ver um exemplo no link que está dentro do artigo, Adam.
http://jsfiddle.net/NJMSj/30/
Eu vi o exemplo, mas no exemplo vc trata como uma classe… Eu nao sei como alterar isso para chamar a funcao no onkeypress e colocar essa funcao no meu arquivo junto com outras mascaras…
cara deixei minha funcao assim… mas ainda sim nao funciona… voce sabe me dizer o que esta errado?!?!?
function MascaraCel(cel){
if(/(\(11\) 9(9|8|7)).+/i.test(cel))
return formataCampo(cel, ‘(00) 00000-0000′, event);
else
return formataCampo(cel, ‘(00) 0000-0000′, event);
}
Adam,
Todo o código que você precisa para implementar é o que está no post, nada mais.
Basta trocar o seletor jquery $(‘.sao_paulo_phone_number’) para o elemento que você quer aplicar a mascara, não tem segredo.
ja fiz todas as mudancas possiveis que veio a minha cabeca e nada funcionou… relamente nao sei o que eu estou fazendo de errado…
consegui… valeu…
excelente!
Boa Tarde,
Está me retornando a seguinte mensagem de erro no Firefox através do Firebug:
too much recursion
…unction(h.promise)?h.promise().then(d.resolve,d.reject):d[g](h)}):b[a](d[g])})})…
Alguém poderia me dar um help?
Está funcionando normalmente mas está lento o processamento na hora que está sendo digitado o número do telefone.
@Rodrigo
Qual versão do jquery mask plugin você está utilizando?
Olá!
Vocês sabem que Telefones Nextel não entram na regra do nono dígito?
Como deverá ser o tratamento para esse caso nessa máscara?
[]s
Estamos usando em um projeto seu plugin, diga-se de passagem muito bacana. Mas estamos com um pequeno problema para telefones de SP.
Quando o valor do telefone vem do servidor, o plugin deixa o campo de texto formatado inicialmente com: (99) 9999-9999 e o valor mesmo sendo com um dígito a mais acaba sendo limitado pela máscara que está no campo.
Verifica se o código que vocês estão usando é o mesmo que está sendo mencionado aqui no POST. O código passou por várias atualizações.
É o mesmo código cara, funciona perfeito quando o usuário está digitando. Nosso único problema é quando vamos carregar um registro do bd. Exemplo: vou alterar um cliente, mesmo no banco de dados estando o telefone com os dígitos 11999999999, acaba saindo nesse formato (11)9999-9999.
Vou tentar alterar o JQuery que seta a máscara, para verificar o tamanho da string e aí sim setar a máscara, pois ela só está sendo alterada no keyPress.
Olha como está hoje:
“$(‘.sao_paulo_phone_number’).mask(‘(00) 0000-0000′,…..”
Se eu conseguir condicionar o momento em que a máscara está sendo setada, acredito que consigo solucionar meu problema.
Eu tive o mesmo problema que você e foi assim que eu resolvi:
https://gist.github.com/3724610
No meu caso o dado já vem formatado pelo sistema (00) 00000-0000 então talvez você precise adaptar a linha 12:
mask = phone_field.val().match(phone_mask) ? ‘(00) 00000-0000′ : ‘(00) 0000-0000′;
Só tive que tirar o scope daqui: phone_fields = $(“.phone”, scope);
E funcionou perfeitamente! Muitíssimo Obrigado Sr. Igor Escobar!
De nada
Pessoal, na versão v.0.5.0 do jQuery Mask Plugin vocês já podem passar uma função como mascara e implementar a logica de inicialização da mascara. Desta forma fica mais elegante a forma como resolvemos o problema das mascaras para celulares de SP.
Antes era assim: https://gist.github.com/3724610/a645335f693b1b7cf00838ab87aded5b58033beb
Com a versão nova fica assim:
https://gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9
[]‘s
Igor.
Olha eu “quase” não entendo nada de programação rsss
Sou apenas curiosa, mas consegui usar tudo direitinho, inclusive tenho três campos de telefones, como não sabia como fazer rsss, usei três class diferentes.
Obrigada pela dica, ajudou e muito!
Boa tarde Igor teria como fazer uma alteração para verificar o numero na hora da digitacao e inserir automaticamente o numero 9 ? Tentei de varias formas e nao consegui. Na sua mascara só funciona se a pessoa digitar o numero 9.
Obrigado
@Abner
Com a última versão do jQuery Mask Plugin você consegue fazer desta forma:
https://gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9
Com a VERSÃO ANTIGA é assim:
https://gist.github.com/3724610/a645335f693b1b7cf00838ab87aded5b58033beb
Igor, bom dia!
Teria como fazer alguma validaçao para saber se os campos foram digitados corretamente, antes de salvar?
O objetivo do plugin é só fazer a mascara mesmo, Isabela. Mas você pode usar o evento onComplete ou o OnKeyUp da mascara para chamar algum plugin de validação que você esteja usando e fazer as devidas validações no campo.
- Igor
Perfeito!! Obrigado!
Sensacional seu plugin Igor, parabéns.
Mas tenho uma dúvida, se eu preencher o campo com um número: 11 7150-0521
e depois voltar no campo e quiser incluir o 9o dígito a máscara não permite, eu preciso limpar o campo e inserir novamente. Existe alguma maneira de contornar isso?
Att.
Olá @Aclébson.
Não entendi o seu problema. O código que consta no post avalia a mascara que deve ser preenchida a cada número imputado. É importante entender como o código funcionda. Não é qualquer telefone que deve ter o digito a mais. Somente os telefones celulares que iniciam com 9 + 5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9] deve ter o digito à mais. Caso contrário a máscara não se aplica. O caso que você mencionou é realmente necessário pois o plugin precisa avaliar o numero de telefone inputado antes de decidir se deve ou não aplicar o dígito adicional.
- Igor