igorescobar / jQuery-Mask-Plugin

A jQuery Plugin to make masks on form fields and HTML elements.
http://igorescobar.github.io/jQuery-Mask-Plugin/
Other
4.77k stars 1.42k forks source link

jMaskGlobals só atualiza opções pré-definidas! #533

Open chinnonsantos opened 7 years ago

chinnonsantos commented 7 years ago

Estou atualizando o plugin da minha aplicação, removendo o Mask Input e Mask Money para incluir somente o Mask Plugin que faz o serviço dos dois juntos, mas estou tendo problemas em sobrescrever qualquer opção que não esteja pré-definida em jMaskGlobals.

Um exemplo e o clearIfNotMatch e placeholder, no caso estou querendo que todos as mascaras limpe o campo caso não seja completada a regra (assim esta na aplicação atualmente), mas mesmo incluindo a opção habilitada na variável global o plugin não reconhece, somente reconhece as alterações em opções pré-definidas.

Qualquer uma das pré-definidas abaixo ele responde corretamente a alteração:

    $.jMaskGlobals = {
        maskElements: 'input,label,td,span,strong,div',
        dataMaskAttr: '*[data-mask]',   
        dataMask: false,    
        watchInterval: 300, 
        watchInputs: true,  
        watchDataMask: false,   
        byPassKeys: [9, 16, 17, 18, 36, 37, 38, 39, 40, 91],
        translation: {
            '0': {pattern: /\d/},
            '9': {pattern: /\d/, optional: true},
            '#': {pattern: /\d/, recursive: true},
            'A': {pattern: /[a-zA-Z0-9]/},
            'S': {pattern: /[a-zA-Z]/}
        }
    };

    $('.datepicker').mask("00/00/0000", {
        placeholder: "dia/mês/ano",
                clearIfNotMatch: true
    });

Mas se eu incluir por exemplo um placeholder global ou habilitar a limpeza caso não satisfaça a regra ele simplesmente não responde as duas novas opções:

    $.jMaskGlobals = {
        maskElements: 'input,label,td,span,strong,div',
        dataMaskAttr: '*[data-mask]',   
        dataMask: false,    
        watchInterval: 300, 
        watchInputs: true,  
        watchDataMask: false,   
        byPassKeys: [9, 16, 17, 18, 36, 37, 38, 39, 40, 91],
        translation: {
            '0': {pattern: /\d/},
            '9': {pattern: /\d/, optional: true},
            '#': {pattern: /\d/, recursive: true},
            'A': {pattern: /[a-zA-Z0-9]/},
            'S': {pattern: /[a-zA-Z]/}
        },
                clearIfNotMatch: true,
                placeholder: "dia/mês/ano"
    };

        $('.datepicker').mask("00/00/0000", {
        //placeholder: "dia/mês/ano",
                //clearIfNotMatch: true
    });

Eu consigo alterar o arquivo do plugin (jquery.mask.js) para habilitar Globalmente, mas dessa forma é incorreto, pois se no futuro eu precisar atualizar o arquivo do plugin provavelmente eu não irei lembrar que fiz essa modificação e causarei problemas na aplicação. (o Caso do placeholder é só para questão de teste, não tenho a intenção de deixar "dia/mês/ano" em todas as mascaras...)

o Plugin é ótimo mas não conseguir definir algumas opções Globalmente esta sendo um problema para mim porque tenho que definir 'clearIfNotMatch: true' em todos os seletores de mascara, veja se é possível deixar todas as opções do plugin sendo alterada pela variável global.

Exemplo no jsFiddle

igorescobar commented 7 years ago

@chinnonsantos Eu concordo que a opção clearIfNotMatch poderia ser suportada na jMaskGlobals porém, o caso do placeholder não faz muito sentido para mim assim como você mesmo disse. Implementar o clearIfNotMatch é facil. Caso não queira esperar, você mesmo pode implementar e enviar um PR com a sugestão.

chinnonsantos commented 6 years ago

@stonestecnologia tem um bom tempo que eu fiz testes com valores numéricos e monetários utilizando o Mask-Plugin, eu lembro que para números inteiros tanto positivos e negativos não há problemas utilizando expressão regular, mas para valores com casas decimais (moeda) não deu certo, de toda forma apresentava problemas na formatação, não recordo direto mas apresentava mais problemas em dispositivos móveis (tablets e smartphones), no final eu conversei com o @igorescobar e ele mesmo me recomendou continuar usando o Mask-Money para valores monetários pq o dele não foi projetado com foco em valores monetários, tem o básico para moedas mas não é o foco, é foi o que eu fiz, utilizo o Mask-Plugin para tudo exceto valores monetários, segue o trecho de código que utilizo para manipular valores monetários negativos com Mask-Money:

$(".maskMoneyNegative").maskMoney({
    prefix: 'R$ ',
    allowNegative: true,
    thousands: '.',
    decimal: ',',
    affixesStay: false // Mantem o Prefix/Suffix
});

Gosto de utilizar junto com essa mascara, a inclusão do atributo maxlength para evitar erros de extrapolação na hora do salvamento no banco de dados (também tenho uma validação back-end, mas essa front-end diminui a irritação do usuário que receberia o erro só após o envio do formulário):

// Limite do tipo Float (13,2) do Banco de Dados + Formatação + Sinal (-)
$(".maskMoneyNegative").attr('maxlength',22);
chinnonsantos commented 6 years ago

@stonestecnologia 100% não, mas pra moeda ele ficou melhor que o Mask-Plugin