sexta-feira, 9 de outubro de 2009

Colocando barras "/" automaticamente no seu formulário

Este é mais um mecanismo interessante para atribuir ao seu formulário. É uma função JavaScript que insere automaticamente qualquer tipo de caractere (normalmente "/" ou "-") em um local pré-determinado.

Vejamos como ficará a função JavaScript:

<script language="JavaScript" >
function barraNascimento(n){
   if(n.value.length==2)
      c.value += '/';
   if(n.value.length==5)
      c.value += '/';
}
</script>

Explicação: Depois de dois caracteres digitados ele adiciona uma barra "/" no formulário, e repete isso para quanto tiver cinco caracteres digitados.


Para criar o formulário existe alguns pequenos detalhes, vejamos a seguir:

<form method="post" >
   Nascimento: <input type="text" name="nascimento" maxlength="10" onkeyup="barraNascimento(this);" />
</form>


Explicação: O comando onkeyup="barraNascimento(this);" significa que após você apertar uma tecla ele irá chamar a função "barraNascimento" e enviar o valor que está no formulário para ela.


Juntando os dois ficará assim:

<head>
<script language="JavaScript" >
   function barraNascimento(n){
      if(n.value.length==2)
         c.value += '/';
      if(n.value.length==5)
         c.value += '/';
   }
</script>
</head>
<body>
<form method="post" >
   Nascimento: <input type="text" name="nascimento" maxlength="10" onkeyup="barraNascimento(this);" />
</form>
</body>

Observação: Não se esqueça que código em java deve estar no <head> do seu site.

Agora é só usar a criatividade, basta adaptar o código. Qualquer dúvida basta perguntar.

Um comentário:

  1. Amigo, obrigado pela dica. Pelo post ser bem antigo não sei se você vai ver o comentário, mas o código tem um erro. Na linha c.value += '/'; deveria ser n.value += '/';, pois o parâmetro da função é "n". Também ajuda se vc usar onkeypress ao invés de onkeyup, pois melhora na hora de apagar caracteres do formulário. Mas novamente obrigado, bela dica!

    ResponderExcluir