Mascaras com JQuery-Mask

Mascaras com JQuery-Mask.


Autor : Antonio Carlos Ferreira de Azevedo
Postado em : 26/04/2016

jquery-mask.js



Baixe o plugin jquery-mask.js e Mascaras.js no link abaixo



ou se preferir de uma olhada no link da postagem do autor deste plugin


Fizemos algumas modificações nas mascaras, você vai encontrar por exemplo uma mascara dinâmica para tratar telefones com 9 dígitos phone_br.

Lembrando sempre que o carregamento do arquivo jquery-mask.js e Mascaras.js deve ser feito após o carregamento do plugin do JQuery.

Exemplo de uso

<input class='phone_br' id='Telefone' name='Telefone' value='11987451234' /> 



Mascaras.js

$(document).ready(function () {
    $('.date').mask('00/00/0000');
    $('.time').mask('00:00:00');
    $('.date_time').mask('00/00/0000 00:00:00');
    $('.cep').mask('00000-000');
    $('.phone').mask('0000-0000');
    $('.phone<kbd>wit</kbd>ddd').mask('(00) 0000-0000');
    $('.phone_us').mask('(000) 000-0000');    
    $('.phone_br').focusout(function () {
        var phone, element;
        element = $(this);
        element.unmask();
        phone = element.val().replace(/\D/g, '');
        if (phone.length > 10) {
            element.mask("(99) 99999-9999");
        } else {
            element.mask("(99) 9999-99999");
        }
        }).trigger('focusout');
    $('.mixed').mask('AAA 000-S0S');
    $('.cpf').mask('000.000.000-00', { reverse: true });
    $('.cnpj').mask('00.000.000/0000-00', { reverse: true });
    $('.money').mask('000.000.000.000.000,00', { reverse: true });
    $('.money2').mask("#.##0,00", { reverse: true });
    $('.integer').mask("#.##0", { reverse: true });
    $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
        translation: {
            'Z': {
                pattern: /[0-9]/, optional: true
            }
        }
    });
    $('.ip_address').mask('099.099.099.099');
    $('.percent').mask('##0,00%', { reverse: true });
    $('.clear-if-not-match').mask("00/00/0000", { clearIfNotMatch: true });
    $('.placeholder').mask("00/00/0000", { placeholder: "<mark>/</mark>/<mark></mark>" });
    $('.fallback').mask("00r00r0000", {
        translation: {
            'r': {
                pattern: /[\/]/,
                fallback: '/'
            },
            placeholder: "<mark>/</mark>/<mark></mark>"
        }
    });
    $('.selectonfocus').mask("00/00/0000", { selectOnFocus: true });
});




Comentários