Código de JavaScript - Saltar campos de formulario con la tecla enter

Imágen de perfil

Saltar campos de formulario con la tecla entergráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 07 de Octubre del 2016 por xve
4.636 visualizaciones desde el 07 de Octubre del 2016. Una media de 49 por semana
Este simple ejemplo, muestra como movernos entre los <input> de un formulario pulsando la tecla "enter"
Al llegar al ultimo <input> envía el formulario.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(4)

Actualizado el 08 de Octubre del 2016 (Publicado el 07 de Octubre del 2016)gráfica de visualizaciones de la versión: Versión 1.0
4.637 visualizaciones desde el 07 de Octubre del 2016. Una media de 49 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
	<form>
		<input type="text" id="input1" onkeyup="saltar(event,'input2')">
		<br><input type="text" id="input2" onkeyup="saltar(event,'input3')">
		<br><input type="text" id="input3" onkeyup="saltar(event,'input4')">
		<br><input type="text" id="input4" onkeyup="saltar(event,'submit')">
	</form>
</body>
</html>
 
<script>
// Funcion que se ejecuta cada vez que se pulsa una tecla en cualquier input
// Tiene que recibir el "event" (evento generado) y el siguiente id donde poner
// el foco. Si ese id es "submit" se envia el formulario
function saltar(e,id)
{
	// Obtenemos la tecla pulsada
	(e.keyCode)?k=e.keyCode:k=e.which;
 
	// Si la tecla pulsada es enter (codigo ascii 13)
	if(k==13)
	{
		// Si la variable id contiene "submit" enviamos el formulario
		if(id=="submit")
		{
			document.forms[0].submit();
		}else{
			// nos posicionamos en el siguiente input
			document.getElementById(id).focus();
		}
	}
}
</script>



Comentarios sobre la versión: Versión 1.0 (4)

Imágen de perfil
kip
08 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
Humberto
10 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
se ve interesante y corto lo usar ene mis proyectos gracias men :)
Responder
Deyvid
20 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
TOP!! Ajudou muito e resolveu um problema que tinha num sistema web. Parabéns!!
Responder
Imágen de perfil
ScriptShow
21 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
Muy útil, sencillo, interesante...

Gracias por el aporte.

Un saludo
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3696  
Revisar política de publicidad