Configuração de máscara campos

Objetivo
Configurar máscara nos campos HTML utilizando recursos HTML5 e/ou jQuery.

Tecnologias aplicadas

• HTML5;
• jQuery:
• maskedInput;
• maskMoney;

Estrutura de arquivo

• index.html => Arquivo principal do post com exibição dos campos com suas respectiva máscara configurada.

Desenvolvimento

Arquivo: index.html

Inicialmente vamos importar as bibliotecas que precisaremos para trabalhar.

jQuery: 

<script type="text/javascript" src="js/jquery.js"></script>

jQuery UI: [Para campo data]

<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css" /> 

<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> 

MaskedInput: [Para campos CEP, CPF, CNPJ, Telefone, Data e Hora]

<script type="text/javascript" src="js/mascara/maskedinput.js"></script>

MaskMoney: [Para campos Moeda]

<script type="text/javascript" src="js/mascara/jquery.maskMoney.js"></script>

Configurando campo data para mostrar um minicalendário com jQuery UI usando o datepicker:

$(".txtdata").datepicker({

  monthNames: [ "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro" ],

  monthNamesShort: [ "Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez" ],

  dayNames: [ "Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado" ],

  dayNamesMin: [ "Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb" ],

  dateFormat: "dd/mm/yy"

  });

Configuração da máscara do campo data:

$(".txtdata").mask("99/99/9999");

Configuração da máscara do campo hora:

$.mask.definitions['h']='[012]'; //configura hora

$.mask.definitions['m']='[0-6]'; //configura minutos

$(".txthora").mask("h9:m9");

Configuração da máscara do campo telefone e celular:

$("input[type='tel']").mask("(99) 99999999?9");

Configuração da máscara do campo CEP:

$(".txtcep").mask("999999-999");

Configuração da máscara do campo CNPJ:

$(".txtcnpj").mask("99.999.999/9999-99");

Configuração da máscara do campo CPF:

$(".txtcpf").mask("999.999.999-99");

Configuração da máscara do campo moeda:

$(".txtmoeda").maskMoney({allowNegative: true, thousands:'.', decimal:','});

Essas configurações devem ser feita dentro das tags Head na função jQuery de carregamento de página:

<script type="text/javascript">

    $(document).ready(function(){

                 // digite as configurações aqui.

        });

</script>

Já na tag body vamos incluir nossos campos (input). É importante ressaltar que a configuração está sendo feito utilizando o class do input como seletor, logo, o class informado na configuração javascript deve ser o mesmo no input abaixo.

Campo data HTML5:

<input type="date">

Campo data jQuery:

<input type="text" class="txtdata">

Campo hora HTML5:

<input type="time">

Campo hora jQuery:

<input type="text" class="txthora">

Campo Telefone:

<input type="tel">

Campo CEP:

<input type="text" class="txtcep">

Campo CPF:

<input type="text" class="txtcpf">

Campo CPNJ:

<input type="tel" class="txtcnpj">

Campo Moeda:

<input type="text" class="txtmoeda">

Campo de Paleta de Cores HTML5:

<input type="color">

Campo de Faixa deslizante do HTML5:

<input type="range" min="10" max="100">

Esse foram alguns exemplos de configuração de campos que podemos fazer em formulário.

Por enquanto é isso.

Obrigado!

Em breve outros posts...

Download dos arquivos.