Alternar entre campos de formulário com a tecla ENTER

Canal: JavaScript  |  Autor: Jonathan Lamim Antunes  |  Publicado em: 15/05/2009  |  Views: 2.838

É 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 %3Cinput ... %3E 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.

%3Cscript language="javascript" type="text⁄javascript"%3E 

//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) 

%3C⁄script%3E

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

%3Cform name="meuFormulario" onSubmit="return false"%3E
%3Cinput type="text" name="campo1" size="12" onFocus="proximoCampo ="campo2";"%3E%3Cbr%3E
%3Cinput type="text" name="campo2" size="12" onFocus="proximoCampo ="campo3";"%3E%3Cbr%3E
%3Cinput type="text" name="campo3" size="12" onFocus="proximoCampo ="campo4";"%3E%3Cbr%3E
%3Cinput type="text" name="campo4" size="12" onFocus="proximoCampo ="fin";"%3E%3Cbr%3E
%3Cinput type="submit" name="done" value="Enviar"%3E%3C/form%3E

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

Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Keka
Publicado em:
18/05/2009 - 08:05
Keka
OBA!!!! Era exatamente isso que eu estava procurando, simples e fácil de entender. Poste mais artigos sobre JavaScript, sou leitora assídua e adoro programação pra web.
Alex Moraes
Publicado em:
18/05/2009 - 08:11
Alex Moraes
Muito boa essa matéria, bem didática e funcional. Diferentemente de algumas outras publicadas por aí, as que você escreve possuem uma didática que permite uma fácil compreensão. Continue assim...