Você pode fazer isso no blur, não vejo uma alternativa melhor. Ou seja, faça o seguinte:
$('#fone').mask('(00) 0000-00009');
$('#fone').blur(function(event) {
if($(this).val().length == 15){ // Celular com 9 dígitos + 2 dígitos DDD e 4 da máscara
$('#fone').mask('(00) 00000-0009');
} else {
$('#fone').mask('(00) 0000-00009');
}
});
Recentemente tive um problema com o uso de diversos inputs na mesma tela, $('.phone-mask')
porque a máscara não era atualizada, pois o unmask
guarda em uma variável o seletor, e como eu deveria remascarar apenas o input
atual então não funcionava, ou seja meu código que era:
$('.phone-mask').mask('(00) 0000-00009');
$('.phone-mask').blur(function(event) {
if($(this).val().length == 15){ // Celular com 9 dígitos + 2 dígitos DDD e 4 da máscara
$(this).mask('(00) 00000-0009');
} else {
$(this).mask('(00) 0000-00009');
}
});
Não funcionava pois a máscara não foi criada com o seletor this
e sim com o seletor .phone-mask
, porém se eu reaplicasse a máscara iria aplicar para todos os inputs da tela e eu não queria isso, então meu código ficou assim:
$('.phone-mask').each(function(i, el){
$('#'+el.id).mask("(00) 00000-0000");
})
function updateMask(event) {
var $element = $('#'+this.id);
$(this).off('blur');
$element.unmask();
if(this.value.replace(/\D/g, '').length > 10) {
$element.mask("(00) 00000-0000");
} else {
$element.mask("(00) 0000-00009");
}
$(this).on('blur', updateMask);
}
$('.phone-mask').on('blur', updateMask);