"On-the-fly Mask Change" behaviour

[fernandosantucci]

Oi Igor,

Primeiro eu gostaria de parabenizar você e todos os colaboradores do Mask Plugin. Vocês realmente fizeram um trabalho espetacular e me quebraram um galhão. Dá orgulho de ser brasileiro.

Eu tô usando o jQuery Mask Plugin no Oracle Apex v4.2.3 e a cada dia que passa eu fico surpreso e ao mesmo tempo decepcionado com o Apex por não ter recursos básicos, mas ser muito produtivo em outros aspectos.

Bem... eu queria relatar um problema com o comportamento da feature "On-the-fly Mask Change". Eu tô usando o seguinte código:

$(function() {
$('.cnpj').mask('00.000.000/0000-00', {reverse: true});
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.cpfcnpj').mask('000.000.000-009', {
onKeyPress: function(cpfcnpj) {
var masks = ['000.000.000-009', '00.000.000/0000-00'];
mask = (cpfcnpj.length<15) ? masks[0] : masks[1];
$('.cpfcnpj').mask(mask, this);
}
});
});

Ao usar um campo comum para pessoas físicas e jurídicas, eu criei uma máscara de CPF maior que o necessário (o 9 opcional no final da máscara) para poder identificar que estou digitando um CNPJ e o plugin trocar de máscara. Com esse "truque", está funcionando as mil maravilhas em forms de inclusão, porém quando carrego o valor do banco de dados em forms de alteração, o plugin está truncando o CNPJ sem considerar o atributo 'length' do campo. Acredito que o plugin deva monitorar o evento 'onload' do campo e ler o seu 'length' antes de aplicar a máscara.

Claro, uma solução simples seria separar o CPF do CNPJ na tabela do database, mas as vezes lidamos com legado e nem sempre é possível uma refatoração.

Um forte abraço a todos.

Fernando Santucci

[fernandosantucci]

Esqueci de dizer que estou usando o Firefox v24.0 com Oracle Database 11g XE.

[jhonnytuba]

Boa noite @fernandosantucci, modifiquei um pouco o código que você postou, para a seguinte forma:

$(function() {
    $('.cnpj').mask('00.000.000/0000-00', {reverse: true});
    $('.cpf').mask('000.000.000-00', {reverse: true});

    var masks = ['000.000.000-009', '00.000.000/0000-00'];
    $('.cpfcnpj').mask('000.000.000-00000', {
        onKeyPress: function(val, e, el, options) {
            var mask = (val.length < 15) ? masks[0] : masks[1];
            el.mask(mask, options);
        }
    }).keyup();
});

Com a chamada ".keyup()" irá fazer com que chame a função "onKeyPress" (fazendo o efeito de onload), mas talvez o Igor tenha uma opção melhor.

Abraço.

[igorescobar]

@fernandosantucci e @jhonnytuba
Deem uma olhada na seção "Mask as a function" da documentação.

O que vocês precisam fazer é adicionar a mesma logica que fizeram no onKeyUp do plugin na Inicialização da mascara.

Dê uma olhada neste jsFiddle:
http://jsfiddle.net/BHnp3/2/

(obs: achei um bug na inicialização da mascara como função atualizem a versão de vocês para v1.3.2)

[fernandosantucci]

1. Atualizei a versão;
2. Segui o exemplo do JS Fiddle;
3. Testei a aplicação;
4. Está tudo funcionando perfeito.

Suporte just in time, em pleno domingo?

Vocês são sensacionais! Eu não tenho palavras. Pode ter certeza que vou divulgar o trabalho de vocês.

Na verdade já abri a alguns dias uma feature request no issue tracker do Oracle Apex pra que ele venha com o jQuery Mask Plugin integrado, pois, apesar do Apex vir com o jQuery v1.8 instalado, pouca coisa foi implementada no lado cliente nos templates pra desktop, só em templates de dispositivos móveis, toda validação e máscaras de dados ainda ocorrem no lado servidor via PL/SQL. Ao menos era a filosofia do HTMLDB antes da invenção do Ajax e o aumento da relevância do javascript no mainstream.

Votem lá na Feature: AH42

https://apex.oracle.com/pls/apex/f?p=55447:19:6997154360822:::19:P19_ID:310595051701945384809146055199311032337

Muitissimamente grato!

[igorescobar]

Eu que agradeço por você vir até aqui e cuidadosamente ter relatado o problema que estava enfrentando. Por isso o jQuery Mask Plugin está cada vez melhor ;)

[MarcoMoraes]

Olá,
Consegui de outra maneira, utilizando a lógica do telefone de SP:

var DocMaskBehavior = function (val) {
  return val.replace(/\D/g, '').length < 12 ? '000.000.000-009' : '00.000.000/0000-00';
},
spOptions = {
  onKeyPress: function(val, e, field, options) {
      field.mask(DocMaskBehavior.apply({}, arguments), options);
    },clearIfNotMatch: true

};
$(".cpfcnpj").mask(DocMaskBehavior, spOptions);

[ruanltbg]

Resolvei da seguinte maneira.

    var options =  {
      onKeyPress: function(value, e, field, options) {
        var mask = (value.length < 15) ? '000.000.000-009' : '00.000.000/0000-00';
        $('#user_cpf_cnpj').mask(mask, options);
    }};

    $('#user_cpf_cnpj').mask('000.000.000-009', options);

[edusantosstudio]

Fazem assim?

$(document).ready(function() {
var DocMaskBehavior = function (val) {
return val.replace(/\D/g, '').length < 12 ? '000.000.000-009' : '00.000.000/0000-00';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(DocMaskBehavior.apply({}, arguments), options);
},clearIfNotMatch: true

};
$(".cpfcnpj").mask(DocMaskBehavior, spOptions);
});