Nesse tutorial você aprenderá a pular campos ao pressionar Enter como se estivesse pressionando TAB.
Para tal, utilizaremos jQuery que é uma biblioteca JavaScript cross-browser, ou seja, funciona em vários navegadores.
<html>
<head>
<title>Pular Campos</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* ao pressionar uma tecla em um campo que seja de class="pula" */
$('.pula').keypress(function(e){
/*
* verifica se o evento é Keycode (para IE e outros browsers)
* se não for pega o evento Which (Firefox)
*/
var tecla = (e.keyCode?e.keyCode:e.which);
/* verifica se a tecla pressionada foi o ENTER */
if(tecla == 13){
/* guarda o seletor do campo que foi pressionado Enter */
campo = $('.pula');
/* pega o indice do elemento*/
indice = campo.index(this);
/*soma mais um ao indice e verifica se não é null
*se não for é porque existe outro elemento
*/
if(campo[indice+1] != null){
/* adiciona mais 1 no valor do indice */
proximo = campo[indice + 1];
/* passa o foco para o proximo elemento */
proximo.focus();
}
}
/* impede o sumbit caso esteja dentro de um form */
e.preventDefault(e);
return false;
})
})
</script>
</head>
<body>
<table>
<tr>
<td>Campo 1:<input type="text" id="campo1"
name="campo1" class="pula" /></td>
</tr>
<tr>
<td>Campo 2:<input type="text" id="campo2"
name="campo2" class="pula" /></td>
</tr>
<tr>
<td>Campo 3:<input type="text" id="campo3"
name="campo3" class="pula" /></td>
</tr>
<tr>
<td><input type="button" value="Enviar" /></td>
</tr>
</table>
</body>
</html>
Efeito simples e funcional, com algumas modificações da para fazer requisições Ajax ao pressionar Enter para enviar um valor.
