Para fazer máscaras para campos que possuem um padrão definido, como por exemplo cpf, telefone, cep, etc, utilizo este plugin para facilitar a vida.
Ele está disponível aqui:
https://github.com/zejuniortdr/jquery.meiomask.9digito
Depois de adicioná-lo em sua página, basta criar um arquivo de iniciliação como o a seguir:
/* Mascaras pre-existentes*/
/*$.mask.masks : {
'phone' : { mask : '(99) 9999-9999' },
'phone-us' : { mask : '(999) 9999-9999' },
'cpf' : { mask : '999.999.999-99' },
'cnpj' : { mask : '99.999.999/9999-99' },
'date' : { mask : '39/19/9999' }, //uk date
'date-us' : { mask : '19/39/9999' },
'cep' : { mask : '99999-999' },
'time' : { mask : '29:69' },
'cc' : { mask : '9999 9999 9999 9999' }, //credit card mask
'integer' : { mask : '999.999.999.999', type : 'reverse' },
'decimal' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue: '000' },
'decimal-us' : { mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' },
'signed-decimal' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' },
'signed-decimal-us' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' }
}
*/
/* Mascaras personalizadas */
$.mask.masks = $.extend($.mask.masks,{
msk:{ mask: '999-999' },
other_msk:{ mask: '6666' },
another_one:{ mask: '7777' , type:'reverse' },
dose:{ mask: '99'},
termina_em:{ mask: '39/19/9999', autoTab:false },
phone_9digito:{ mask: '(99) 99999-9999'}
});
(function($){
$(function(){
$('input:text').setMask();
var ddds = ['11) 9','12) 9','13) 9','14) 9','15) 9','16) 9','17) 9','18) 9','19) 9','21) 9','22) 9','24) 9','27) 9','28) 9'];
// SP 11 - 19
// RJ 21,22,24
// ES 27,28
$('#id_telefone, #id_celular, #id_celular_validacao, #id_telefone').keydown(function(event) {
if( procura_no_array($(this).val().substring(1,6), ddds) >= 0){
$(this).attr('alt','phone_sp');
}else{
$(this).attr('alt','phone');
}
$(this).setMask();
});
});
})(jQuery);
No comentário acima, é possivel verificar alguns dos tipos disponíveis deste plugin, e se caso achar necessário pode-se criar novas máscaras como pode ser visto logo abaixo do bloco comentado. O init normal resume-se a apenas a instrução $('input:text').setMask(); chamada no onload da página.
Com a nova norma da Anatel, os celulares de São Paulo receberam o número 9 a frente dos 8 dígitos já existentes, e uma personalização para tal foi necessária no plugin. No evento onkeypress de todos os campos telefones e celulares, caso o DDD tenha o nono dígito, será aplicado a máscara personalizada "phone_9digito", caso contrário a máscara normal de telefone ("phone") será aplicada.
Para aplicação de qualquer máscara em seus inputs, basta colocar a identificação da máscara no atributo alt do input. Como no exemplo abaixo:
<input alt="phone_9digito" class="input2" id="id_telefone" name="telefone" placeholder="Telefone" type="text" value="" />
