JQuery Plugins - Máscara em Formulários

Máscara em Formulários

Nos campos de texto, pode ser para telefone, CEP, CPF, RG ou data, existe uma separação entre os elementos. No campo do tipo data por exemplo, uma barra separa os dias, meses e anos. Essa barra é a máscara que é aplicada àquele valor.

Um método fácil de utilizar máscaras em campos HTML com jQuery é o plugin Masked Input Plugin. Ele foi testado no Internet Explorer, Firefox, Safari, Opera e Chrome. Basta informar um simples comando para criar a máscara.

Na home page Máscara para Campos de Formulários é possível fazer o download da versão minificada, download comprimido. Clique nessa opção e verá o código no browser. Clique em salvar como, escolhendo o diretório de plugins, que deverá estar dentro de js, no arquivo escolhido para esses exemplos.

Máscaras para Campo de data e de telefone

	
(O Código abaixo está pronto para uso)

<head>
<title>JQuery Plugins - Máscara em Formulários</title>

<link rel="stylesheet" type="text/css" href="/static/css/style_jQuery-ui.css" />
<script type= "text/javascript" src= "/js/jquery-1.10.2.js"></script> 
<script type= "text/javascript" src= "js/plugins/jquery.maskedinput.min.js"></script>
<script>
$(function(){

$("#data").mask("99/99/9999");
$("#telefone").mask("(999) 9999-9999");

});
</script> 
</head>

<body>
No Html:
<form id="formulario">
<fieldset>
<div>
  <label for="data">Data</label><br /br>
<input type="text" name="data" id="data" />
</div>

<div>
  <label for="telefone">Telefone</label><br /br>
<input type="text" name="telefone" id="telefone" />
</div>

</fieldset>
</form>	
</body>
</html>