dê seu feedback
post favorito
Pular campos ao pressionar Enter, utilizando Jquery
Nesse tutorial você aprenderá a pular campos ao pressionar Enter como se estivesse pressionando TAB, o efeito funciona em todos os navegadores.
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.
Efeito simples e funcional, com algumas modificações da para fazer requisições Ajax ao pressionar Enter para enviar um valor.
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.
1 COMENTÁRIO
Paulo Rodrigo Fernandes Soares
Legau seu post, me ajudou muito mesmo, só um pequeno detalhe, as linhas 33 e 34 deveriam estar entre as linha 30 e 31, da forma em que estão os campos do formulário ficarão bloqueados.
[há +1 mês] -
Responder
[Este post ainda não foi associado a uma sequência]
Você está em:
canal Design
Publicidade
Bruno Xavier
Space do autor
Formado em Sistemas de Informação pela faculdade Dr. Francisco Maeda.
Atua com o desenvolvimento WEB utilizando PHP,CSS,Jquery,Ajax e MySQL.
Atualmente trabalhando como Analista GeneXus para WEB
Space do autor
0
0
