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.
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.
Indicador de qualidade de senh.
Quando um usuário se registra em algum. Próximo artigo
Exibindo Data e Hora na Página
Esta coluna mostra a função em Java Sc.
Veja matérias relacionadas com o assunto:
| 12/03/2010 | Validando CPF através de JavaScript |
| 17/02/2010 | Definição de AJAX |
| 28/12/2009 | Exibindo Data e Hora na Página |
| 10/08/2009 | PNG transparente no IE (não é PNGfix) |
| 05/08/2009 | jQuery.noConflict(), evitando conflito com outras biliotecas |
| 03/08/2009 | jQuery e o conflito com outras bilbiotecas |
| 16/07/2009 | A função jQuery ou função $() |
| 11/07/2009 | Exportando tabelas HTML para o Excel com jQuery |
| 10/07/2009 | Mensagem de Carregando… com Ajax e jQuery |
| 08/05/2009 | Indicador de qualidade de senha |








