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...
É 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?
|
Jonathan Lamim Antunes Graduando em Sistemas de Informação pela UNISA/SP, e programador web da Fivecom - Soluções em web 2.0, uma empresa do grupo Rede Gazeta, afiliada da Rede Globo. |
Últimas matérias escritas pelo autor:
17/08 - Introdução à compressão GZIP de um sit...
02/08 - Imprimindo áreas isoladas de uma págin...
22/06 - Criando um Cliente para Twitter com PH...
17/06 - Twitter - Enviando posts para o Twitte...
15/06 - Twitter - Fazendo conexões com o Twitt...
13/06 - Twitter - Integrando API do Twitter, c...
10/06 - Twitter - Introdução à API do Twitter ...
08/06 - Amazon Product Advertising API
26/05 - Previsão do Tempo com a API do Google ...
20/05 - Inserindo o teclado virtual do Google ...
19/05 - Gerando PDFs com PHP e a classe FPDF -...
17/05 - Gerando PDFs com PHP e a classe FPDF -...
14/05 - Gerando PDFs com PHP e a classe FPDF -...
- jQuery Lazy Load: Carregamento de imagen...
O plugin Lazy Load é um plugin feito em javascript... - Indicador de qualidade de senha
Quando um usuário se registra em alguma aplicação ...






Imprimindo áreas isoladas de uma página com jQuery
jQuery Lazy Load: Carregamento de imagens com scroll
O que você procura para sua vida profissional?
O planejamento agrega valor
E-mail marketing em 140 caracteres
Novos iPods, novo iOS, novo iTunes e nova Apple TV
Conheça as 100 primeiras cidades atendidas pelo Banda Larga ...
Linus Torvalds diz que mercado já se rendeu ao Linux