quinta-feira, 20 de setembro de 2012
JQuery: Restringir caracteres, tamanho e formatar campo de data, cpf e telefone
Nesse post vou mostrar algumas funções prontas com javascript que muito atrapalham e fazem todo desenvolvedor Java perderem muito tempo no dia-à-dia, por não se tratar especificamente da nossa área. Para ajudar vou postar as funções que podem ser copiadas e usadas sem perda de tempo.
Sempre estamos fazendo formulários e nesses formulários precisamos inserir campos como data, data e hora, telefone, cpf, entre outros.
O problema é que não podemos colocar somente o campo lá e aceitar que o usuário digite de qualquer jeito. Para isso podemos usar o Javascript ou JQuery para guiar os usuário a preencherem como desejamos ou como o dono do software deseja que seja inserido os dados.
A forma de fazer isso mais fácil é com JQuery sem dúvidas, veremos nesse tutorial. Mas como nem sempre estamos em um projeto que tem JQuery e também não podemos inserir podemos usar também o Javascript para fazer a mesma coisa de um jeito um pouco mais difícil, clique aqui.
Abaixo segue forma de validar cada tecla precionada no teclado e apenas permitir as que convém para o campo em questão DATA (somente números) os demais digitos o JQuery coloca (Máscara). Para baixar o arquivos fonte, clique aqui. Para baixar os arquivos do JQuery usados no exemplo, utilize os links abaixo.
<html>
<head>
//importa os arquivos do JQuery e do plugin de sites externos
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js"></script>
<style>
label, input { font-size: 20px; padding: 10px; float: left; clear: both; } input { border: 1px solid #333;
</style>
</head>
<body>
<h1>
<p>Máscaras para campos HTML utilizando jQuery </p>
<form action="#">
<label for="campoData">Data:</label>
<input id="campoData" type="texto">
<label for="campoTelefone">Telefone:</label>
<input id="campoTelefone" type="texto">
<label for="campoCpf">CPF:</label>
<input id="campoCpf" type="texto">
<label for="campoCnpj">CNPJ:</label>
<input id="campoCnpj" type="texto">
</form>
<script>
//insere nos respectivos campos a máscara
jQuery(function($){
$("#campoData").mask("99/99/9999 99:99:99");
$("#campoTelefone").mask("(99) 999-9999");
$("#campoCpf").mask("999.999.999-99");
$("#campoCnpj").mask("999.999.999/9999-99");
});
</script>
</body>
</html>
Assinar:
Postar comentários (Atom)
E as validações, alguém pode ajudar?
ResponderExcluir