Cómo hacer que un botón de un formulario funcione al pulsar enter

nati_2309 · #1 (**permalink**) 02/03/2012, 04:39

Hola!
Tengo una dudilla, tengo un formulario en el que se escribe la contraseña que te lleva a otra página, pero me gustaría que además de acceder pulsando el botón con el ratón, pueda accederse también pulsando intro. ¿Alguien sabe como hacerlo?

Dejo aquí el código para que lo veais.

<FORM>Introduce la contraseña para acceder al area privada de clientes<P>
<INPUT TYPE="password" NAME="palclave" SIZE=25 VALUE="">
<INPUT TYPE="button" VALUE="Acceder" onclick="Saltar(this.form.palclave.value)">
</FORM>

Gracias!!

emprear · #2 (**permalink**) 02/03/2012, 06:40

Antes que nada bienvenido/a nati_2309

Usalo asi

Código HTML:

Ver original<form action="#">
<p><input type="password" name="palclave" size="25" value="" />
<input type="submit" value="Acceder" onclick="Saltar(this.form.palclave.value)" />
</p>
</form>

Saludos

diego_viper_007 · #3 (**permalink**) 02/03/2012, 11:38

http://www.forosdelweb.com/f13/capturar-tecla-enter-525222

nati_2309 · #4 (**permalink**) 12/03/2012, 04:05

Gracias por las respuestas, no me funciona con el código que me pusiste ahí emprear.
Voy a probar ese otro enlace a ver si lo consigo.

Gracias

nati_2309 · #5 (**permalink**) 12/03/2012, 04:44

Tampoco consigo que eso funcione.
¿Teneis alguna otra idea?

emprear · #6 (**permalink**) 12/03/2012, 10:20

No funciona seguramente porque estas navegando con IE8, es un bug bastante viejo.

Una posible solución, pero te aclaro que depende un poco de que es lo que estés intentando hacer, ya que entre otras cosas tu form no tiene un action definido

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function Saltar(){
var clave   = document.getElementById("palclave").value;
alert(clave);
return false;
}
 
function Saltar2(msj){
alert(msj);
return false;
}
 
//]]>
</script>
</head>
<body>
<form action="procesar.php" id="form1" onsubmit="return Saltar();">
<p><input type="password" name="palclave" size="25" value="" id="palclave"/>
<input type="submit" value="Acceder" id="enviar" onclick="Saltar2('hola');" />
</p>
</form>
</body>
</html>

Comportamiento
Si hacés click en "acceder", en todos los navegadores te ejecuta las dos funciones, si pones el foco en el campo "palclave" y presionas ENTER, en todos los navegadores menos en ie8/7 te ejecuta las dos funciones, en ie8/7 solo la función Saltar(), que es la que está definida en el evento onsubmit() del form.
Tenés que decidir cual método usar y si devolver un false ó no en las funciones, harían falta más datos para ver que te conviene.
Saludos

nati_2309 · #7 (**permalink**) 14/03/2012, 03:43

Estoy utilizando Firefox, te explico lo que hace el formulario.
Es una casilla donde hay que escribir una contraseña para acceder a la siguiente página.
La contraseña es el nombre del archivo .html de la pagina a la que accedemos. por ejemplo:
Si la pagina a la que quiero acceder se llama "pagina.html" la contrasela es "pagina".

No te puedo decir como funciona ese codigo porque lo copie de interenet tal cual, como puedes ver no tengo mucha idea de estos temas.

No se si te sirve de algo esto que te comento.

emprear · #8 (**permalink**) 14/03/2012, 12:57

lo que estas haciendo es una validacion muy elemental en javascript. Si anallizas el ejemplo anterior ahi mismo está la respuesta, es el primer método el que necesitas, con el evento onsubmit().

Debería quedar así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>como-hacer-que-boton-formulario-funcione-pulsar-enter-979248</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function Saltar(){
var clave   = document.getElementById("palclave").value;
if(clave == ""){
alert('Ingrese su clave');
}else{
location.replace(clave + '.html');
}
return false;
}
//]]>
</script>
</head>
<body>
<form action="#" id="form1" onsubmit="return Saltar();">
<p><label for="palclave">Contraseña: </label><input type="password" name="palclave" size="25" id="palclave"/><br />
<input type="submit" value="Acceder" id="enviar" />
</p>
</form>
</body>
</html>

A partir de ahora espero que si estás pegando y copiando código, analices y entiendas el funcionamiento

nati_2309 · #9 (**permalink**) 26/03/2012, 02:45

Muchas gracias