Utilizando mascara nos formulários de entrada

Curso Escrevendo testes automatizados com PHPUnit

A utilização das mascaras nos formulários, é um item muito importante para o desenvolvedor e também usuário final, pois ela possibilita diminuir as chances de erros ocorrerem por conta do usuário, como por exemplo, inserir um número de telefone inválido.

Acredito que você já passou pela seguinte situação, Esta em um site efetuando um cadastro e insere em um campo uma determinada informação e após clicar no botão de cadastrar o sistema valida e te retorna que os dados estão incorretos, além do erro, alguns campos não voltam preenchido.

O objetivo desta matéria, é apresentar uma biblioteca Javascript que permite adicionar mascaras em campos facilmente.

Mas o que são mascaras?

Mascaras nada mais é do que uma forma de formatar (organizar) as informações em um formulário em tempo real de preenchimento.

Primeiramente precisamos acessar o site http://plugins.jquery.com/mask/ e fazer Download do plugin e também do jQuery, feito isto, adicione o arquivo jquery.js e jquery.mask.min em uma pasta com o mesmo diretório, em seguida crie seu formulário HTML, adicionando o atributo id em todos os campos a serem formatados.

Inclua em seu arquivo .html os dois arquivos Javascript que você fez Download, como mostra o exemplo abaixo.

Código 1:

<!doctype html>
<html lang="pt-br">
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		 <script type="text/javascript" src="jquery.mask.min.js"></script>
	</head>
	<body>
		<form method="post" name="frmUsuario"> <br />
			Nome: <input type="text" name="txtNome" id="txtNome" /> <br />
			Telefone: <input type="text" name="txtTelefone" id="txtTelefone" /> <br />
			CEP: <input type="text" name="txtCep" id="txtCep" /> <br />
			Valor: <input type="text" name="txtValor" id="txtValor" />
		</form>
	</body>
</html>

Agora, precisamos apenas adicionar a mascara ao nosso sistema, para isto é muito fácil, basta fazer como mostrado a baixo.

Código 2:

<script type="text/javascript">
	$(document).ready(function(){
		$('#txtTelefone').mask('(00) 0000-0000'); //Telefone
		$('#txtCep').mask('00000-000'); //CEP
		$('#txtValor').mask('000.000.000.000.000,00', {reverse: true}); //Dinheiro
	});
 </script>

Pronto, feito isto seu documento já esta com a mascara adicionada e funcionando, no código abaixo é possível ver todo o código utilizado no nosso exemplo.

Código 3:

<!doctype html>
<html lang="pt-br">
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		 <script type="text/javascript" src="jquery.mask.min.js"></script>
		 <script type="text/javascript">
			$(document).ready(function(){
				 $('#txtTelefone').mask('(00) 0000-0000'); //Telefone
				 $('#txtCep').mask('00000-000'); //CEP
				 $('#txtValor').mask('000.000.000.000.000,00', {reverse: true}); //Dinheiro
			});
		 </script>
		 <style type="text/css">
			body{
				background-color:#eee;
				color:#111;
				font-family:verdana;
			}
			
			input{
				width:250px;
				height:30px;
				background-color:#FFF;
				font-family:courier;
				margin:5px;
				padding:5px;
				outline-color:red;
			}
		 </style>
	</head>
	<body>
		<form method="post" name="frmUsuario"> <br />
			Nome: <input type="text" name="txtNome" id="txtNome" /> <br />
			Telefone: <input type="text" name="txtTelefone" id="txtTelefone" /> <br />
			CEP: <input type="text" name="txtCep" id="txtCep" /> <br />
			Valor: <input type="text" name="txtValor" id="txtValor" />
		</form>
	</body>
</html>

Outros modelos:

Código 4:

$(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');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
  $('.money2').mask("#.##0,00", {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: "__/__/____"});
  $('.fallback').mask("00r00r0000", {
      translation: {
        'r': {
          pattern: /[\/]/, 
          fallback: '/'
        }, 
        placeholder: "__/__/____"
      }
    });
);

No site http://igorescobar.github.io/jQuery-Mask-Plugin/ você pode visualizar toda a documentação sobre esta biblioteca.

Até a próxima!!!