Alternar entre campos de formulário com a tecla ENTER

É muito prático ( e o usuário agradecerá) a utilização de recursos JavaScript que facilitem o uso de um formulário. Este scrit é um exemplo disto, já que permite alternar entre os campos do formulário...

Publicado em: 15 de maio de 2009  |  Leituras: 3.793  |  Canal: JavaScript  |  Autor: Jonathan Lamim Antunes

É muito prático ( e o usuário agradecerá) a utilização de recursos JavaScript que facilitem o uso de um formulário. Este scrit é um exemplo disto, já que permite alternar entre os campos do formulário utilizando a tecla ENTER, como na maioria dos formuláio de aplicativos GUI.

Adaptá-lo às suas necessidades é muito simples, já que o script admite o nome do formuçário na variável nomeForm. A sequência é configurada com o evento onFocus, na tag <input ... > de cada campo, com o seguinte código:

onFocus="proximoCampo ="proCampo";"
onde "proCampo" é o nome do próxmo campo. No campo final da sequência, deve ser especificado para o evento onFocus:

onFocus="proximoCampo ="fin";"


Desta forma, quando for pressionada a tecla ENTER no último campo da sequência do formulário, será realizado o envio do mesmo.

Agora que já vimos o funcionamento desse script, vamos ver como ele é montado.

<script language="javascript" type="text⁄javascript"> 

//nome do primeiro campo da sequência
proximoCampo = "campo1" 

//nome do formulário
nomeForm = "meuFormulario" 

//função que gere o evento
function TeclaPressionada( e ) { 

if ( window.event != null)     //IE4+ 
tecla = window.event.keyCode; 
else if ( e != null )          //N4+ o W3C compatíveis 
tecla = e.which; 
else 
return; 

if (tecla == 13) {             //se pressionou enter 
if ( proximoCampo == "fin" ) { //fim da sequência, faz o submit 
alert("Envio do formulário.")  //eliminar este alert para uso normal 
return false                   //sustituir por return true para fazer o submit 
} else {                       //passa o foco para o campo seguinte
eval("document." + nomeForm + "." + proximoCampo + ".focus()") 
return false 




document.onkeydown = TeclaPressionada;  //faz com que a função TeclaPressionada seja executada no evento onkeydown
if (document.captureEvents)             //netscape é especial: requer ativação da captura do evento 
document.captureEvents(Event.KEYDOWN) 

<⁄script>

Vamos ver agora o código utilizado para montar o formulário.

<form name="meuFormulario" onSubmit="return false">
<input type="text" name="campo1" size="12" onFocus="proximoCampo ="campo2";"><br>
<input type="text" name="campo2" size="12" onFocus="proximoCampo ="campo3";"><br>
<input type="text" name="campo3" size="12" onFocus="proximoCampo ="campo4";"><br>
<input type="text" name="campo4" size="12" onFocus="proximoCampo ="fin";"><br>
<input type="submit" name="done" value="Enviar"></form>

Em caso de dúvidas e/ou sugestões, postem nos comentários.

Resposta em até 24 horas! (grátis)Dúvidas?

Compartilhe
Share orkut
delicious
Gostei

Nossa url encurtada:
Dicas do canal