Olá pessoal, neste post vou ensinar um recurso bem útil no momento do usuário preencher algumas informações do tipo citado no título, este recurso facilita a visualização e delimitação das informações no momento do seu preenchimento. Bem depois desse resumo vamos colocar a mão na massa:
Primeiramente vamos criar o formulário e escolher algum tipo de campo para trabalhar, no exemplo utilizei o campo do tipo telefone:
<form name="formCadastro">
<fieldset>
<legend>Cadastro</legend>
<p><label for="telefone">Seu telefone:</label>
<input name="telefone" type="text" maxlength="14" size="14" onkeypress="Mascara(this);"></p>
<input type="submit" value="Enviar"> <input type="reset" value="Limpar" >
</fieldset>
</form>
Repare nos seguintes atributos do input do telefone:
- maxlength: delimita a quantidade de caracteres que o campo pode ter.
- size: delimita o tamanho da caixa de input.
- onkeypress: direciona uma ação quando o usuário digita no campo.
Veja para onde o onkeypress(Javascript) aponta: Para a função Mascara() que está implementada nesse código:
<script language="javascript">
function Mascara(objeto){
if(objeto.value.length == 0)
objeto.value = '(' + objeto.value;
if(objeto.value.length == 3)
objeto.value = objeto.value + ')';
if(objeto.value.length == 8)
objeto.value = objeto.value + '-';
}
</script>
Esta função checa o tamanho dos dados digitados pelo usuário, ou seja, verifica em qual posição o objeto se encontra e a partir disso pode-se definir onde serão inseridos os caracteres específicos de cada tipo de campo, como no exemplo eu utilizei o Telefone, então, a função vai delimitar o DDD do telefone com os parênteses e separar os 8 números em 2 partes usando o hífen. Isso foi possível concatenando os caracteres especiais junto ao que se foi digitado, isso ocorreu dentro dos IFs, repare novamente caso tenha dúvida.
Atualmente o estado de São Paulo recebeu mais um dígito na composição de seus números, então o código a cima vai mudar:
<script language="javascript">
function Mascara(objeto){
if(objeto.value.length == 0)
objeto.value = '(' + objeto.value;
if(objeto.value.length == 3)
objeto.value = objeto.value + ')';
if(objeto.value.length == 9)
objeto.value = objeto.value + '-';
}
</script>
Pronto, agora esse código atende a necessidade de São Paulo, o que poderia ser feito nesse caso seria uma chamada de funções de forma que a região do país seja informado pelo usuário, e assim definir qual função será utilizada.
As máscaras de CPF, Data e Dinheiro podem seguir a mesma lógica dessa função, mudando apenas em que momento os caracteres serão concatenados.
Bem, o post acaba por aqui, espero que de alguma forma o código seja útil para vocês =) se houver alguma dúvida ou dicas não exitem em postar. Abraço, e até a próxima.
