Mascaras com JQuery-Mask

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_with_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 });
});

Links Relacionados

• Aula 05 - Validação com Data Annotation (Parte 02) / Mascaras com JQuery-Mask em Asp.Net MVC 4 com C#(CSharp)
• Aula 06 - Validação com Data Annotation (Parte 03) / Números em Asp.Net MVC 4 com C#(CSharp)
• Aula 07 - Validação com Data Annotation (Parte 04) / Validação Remota (Attribute Remote) em Asp.Net MVC 4 com C#(CSharp)
• Aula 08 - Validação com Data Annotation (Parte 05) / Validação E-mail, Senha e Atributo Compare, Ignora Validações em Asp.Net MVC 4 com C#(CSharp)
• Disparando uma requisição JQuery Ajax que fornece como retorno conteúdo HTML gerado pela url acessado C#(CSHarp) ASP.NET MVC.
• Executando uma função JQuery após o carregamento total da página.
• Formatar CEP em C# (CSharp)
• Formatar CNPJ e CPF em C# (CSharp)
• ModelBinder - Customizando o vinculo do Modelo com o HTML em Asp.Net MVC 4 com C# (CSharp)
• Passar parâmetros jquery para Url.Action ASP.NET MVC
• Pegando Tamanho em Pixels de um Elemento por JavaScript

Comentários