Pulsar ENTER para boton

matheo · #1 (**permalink**) 14/11/2008, 06:58

Hola chavales. Tengo el siguiente boton en HTML :

Código HTML:

<input name="Buscar2" type="button" class="BotonPanel"   onclick="BuscarMedico();" id="Buscar2" tabindex="4" value="Buscar" />

Este boton cuando se pulsa te envia a la función Javascript "BuscarMedico()".
Lo que quiero es que tambien se active esta función pulsando ENTER. ¿Como lo hago?

Mikmoro · #2 (**permalink**) 14/11/2008, 09:43

Mira este código de ejemplo, a ver si te sirve de orientación para adaptarlo. Supongo que lo entenderás.

David · #3 (**permalink**) 14/11/2008, 09:46

Yo opino...

que es mejor usar un input type submit y te ahorras el trabajo de capturar los eventos.

Mikmoro · #4 (**permalink**) 14/11/2008, 09:50

¿Pero funciona pulsando el enter?

Lo que yo creo que busca, y es lo que hace ese script, es pulsar el enter justo después de escribir en el campo de texto, sin saltar con el tabulador al submit.

Vamos, como google

David · #5 (**permalink**) 14/11/2008, 09:52

Así es Mikmoro. Funciona sin necesidad de ir con el tabulador al submit.

.

daPhyre · #6 (**permalink**) 14/11/2008, 09:53

No se si sea cosa de los navegadores, pero yo he visto que si estás dentro del formulario, al presionar enter automáticamente hace la acción de submit. Como digo, si es de los navegadores, es posible que no lo hagan todos

Edito: Un pequeño choque con David

Mikmoro · #7 (**permalink**) 14/11/2008, 10:30

David (o DaPhyre, vamos): ¿podrías modificar el código de mi ejemplo para que funcione con el submit?. No sé lo qué, pero algo estoy haciendo mal y no me chuta.

En mi ejemplo escribes www.google.es en la caja de texto y te manda allá.

David · #8 (**permalink**) 14/11/2008, 10:38

Podría ser 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" lang="es-es">
<head>
<title>Formulario</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
window.onload = function() { document.formclave.onsubmit = acceso; }
function acceso(){
alert(document.formclave.clave.value);
}
</script>
<style type="text/css">
.oculto {display: none;}
</style>
</head>
<body>
<form name="formclave">
<input class="oculto"/>
<input type="text" name="clave" />
<input name="button" type="submit" value="Acceder" />
</form>
</body>
</html>

Mikmoro · #9 (**permalink**) 14/11/2008, 10:42

Pues eso es justo lo que estaba probando, y no me chuta. No sé cuál es el error.

David · #10 (**permalink**) 14/11/2008, 10:47

Fíjate que lo he editado, ya que la idea es enviar el formulario, mientras que de la forma como estabamos haciendo tratabamos de redireccionar en vez de realizar ese envío.

matheo · #11 (**permalink**) 14/11/2008, 10:48

Yo ya tengo la dsolucion que yo queria . Es facil, es poner en todos los campos del formulario el evento onkeyup:

Código HTML:

<input name="Nombre_b" id="Nombre_b" onkeyup="if (event.keyCode == 13) BuscarMedico()" type="text" tabindex="1" size="15" maxlength="30" />
<input name="Apellidos_b" id="Apellidos_b" onkeyup="if (event.keyCode == 13) BuscarMedico()" type="text" class="Estilo7" tabindex="2" size="15" maxlength="60" />

daPhyre · #12 (**permalink**) 14/11/2008, 10:50

No estoy seguro, pero creo recordar que eso impide usar el tabulador para desplazarse entre botones

David · #13 (**permalink**) 14/11/2008, 10:51

Insisto en que es mejor usar un input type submit, ya que así de paso haces accesible tu formulario. Y si en la función BuscaMedico() no estás enviando el formulario la cosa se vuelve un poco peor

, ya que tu formulario en ese caso no es semánticamente correcto.

Mikmoro · #14 (**permalink**) 14/11/2008, 10:51

Cita:

Iniciado por David el Grande

Fíjate que lo he editado, ya que la idea es enviar el formulario, mientras que de la forma como estabamos haciendo tratabamos de redireccionar en vez de realizar ese envío.

Acabo de ver lo que has editado, pero lo que a mi me interesa es conseguir lo mismo que en mi ejemplo, es decir, escribir en el campo de texto la dirección de google con las 3 w delante, y que al pulsar ahí mismo el enter te envie a esa página, vamos, como he dicho antes, como hace google en su página del buscador.

matheo · #15 (**permalink**) 14/11/2008, 10:53

Cita:

Iniciado por daPhyre

No estoy seguro, pero creo recordar que eso impide usar el tabulador para desplazarse entre botones

No, no problem

matheo · #16 (**permalink**) 14/11/2008, 10:55

Cita:

Iniciado por David el Grande

Insisto en que es mejor usar un input type submit, ya que así de paso haces accesible tu formulario. Y si en la función BuscaMedico() no estás enviando el formulario la cosa se vuelve un poco peor

, ya que tu formulario en ese caso no es semánticamente correcto.

Si que se envia, la funcion javascript recoge los datos con :

var resultado=document.getElementById("resultado");
var boton=document.getElementById("Buscar");
var valor1=document.getElementById('Dni_b').value;
var valor2=document.getElementById('Nombre_b').value;
var valor3=document.getElementById('Apellidos_b').valu e;

Mikmoro · #17 (**permalink**) 14/11/2008, 10:56

Cita:

Iniciado por matheo

Yo ya tengo la dsolucion que yo queria . Es facil, es poner en todos los campos del formulario el evento onkeyup:

Ah, muy bien. Entonces lo que necesitabas era el "event.keyCode == 13".

David · #18 (**permalink**) 14/11/2008, 10:59

Por favor, usa un botón submit, es accesible, y haz las validaciones en el evento onsubmit del formulario. Pero bueno, es decisión tuya...

Además, lo de event.keyCode solo funciona en Internet Explorer.

Y por fin, lo que decía Mikmoro, aunque me suene descabellado

:

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" lang="es-es">
<head>
<title>Formulario</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
window.onload = function() { document.formclave.onsubmit = acceso; }
function acceso(evt){
if (evt) { evt.preventDefault(); } else { event.returnValue = false; }
location.href = "http://" + document.formclave.clave.value;
}
</script>
<style type="text/css">
.oculto {display: none;}
</style>
</head>
<body>
<form name="formclave">
<input class="oculto"/>
<input type="text" name="clave" />
<input name="button" type="submit" value="Acceder" />
</form>
</body>
</html>

Mikmoro · #19 (**permalink**) 14/11/2008, 11:06

Ya decía yo. ¿Y esa era la manera más sencilla con submit para no tener que capturar los eventos

?

Bueno, a eso respondía yo, y por eso me extrañaba.

No discuto que sea mejor hacerlo con un submit por otras razones que expones después, pero lo que pedía exactamente, creo que era más sencilla mi primera solución.

Y siento haber interrumpido de esta manera. Dejo pista libre para el tema de la consulta en cuestión

David · #20 (**permalink**) 14/11/2008, 11:12

Pues sí, así es, no solo porque es accesible, sino que en un caso real en un formulario con muchos campos, no necesitas agregar nada, absolutamente nada de código Javascript para que lo envíe al hacer ENTER, basta con que el botón de envío sea un submit.

David · #21 (**permalink**) 14/11/2008, 11:27

Y por polemizar un poco más

.

Aunque si atentando contra ciertos principios, el objetivo no fuera enviar el formulario, cancelando el evento onsubmit (con el código que puse) tampoco necesitas agregar nada a cada input text para que ejecuten la acción que deseamos.

En fin, ¿qué había preguntado el usuario?

.

Mikmoro · #22 (**permalink**) 14/11/2008, 11:29

Ehhhh, no te enfades, David

Bueno, es broma. Cuando empezó la consulta no vi por ninguna parte que fuera un formulario con muchos campos ni nada de eso, sino: "¿cómo hago para que este botón haga la misma acción al ser pulsado con el ratón que al pulsar ENTER?", más o menos. Y nada más.

Luego ya se ha desarrollado el caso real, a lo que no pongo ninguna pega a tu apreciación, sólo me ceñía a la primera respuesta.

David · #23 (**permalink**) 14/11/2008, 11:31

Jaja, no, más que enojarme, me divierte mucho polemizar

.

Pero, fíjate en el mensaje #16, sí que tiene muchos campos

:.

Saludos

.

Mikmoro · #24 (**permalink**) 14/11/2008, 11:33

Claro, ya lo he resaltado. Pero...

- mensaje 1: un input.
- mensaje 2: mi respuesta
- mensaje 3: tu réplica
- mensaje 4: mi extrañeza.

David · #25 (**permalink**) 14/11/2008, 11:43

Bueno, explico el por qué de haber sugerido un input type submit aún siendo un solo campo:
Capturando el evento:

Código html:

Ver original<form name="algo">
<input type="text" name="campo" onkeypress="saltar(event)" />
<input type="button" onclick="acceso()" name="Enviar" />
</form>

Código javascript:

Ver originalfunction saltar(e) {
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==13) acceso();
}
function acceso() { document.algo.submit() }

Usando un botón submit:

Código html:

Ver original<form name="algo">
<input type="text" name="campo" />
<input type="submit" value="Enviar" />
</form>

Código javascript:

Ver original/* Pues, que no hace falta :-) */

Mikmoro · #26 (**permalink**) 14/11/2008, 11:59

trampa, trampa, trampa.
Para que funcione has tenido que poner:

Cita:

No me tangues

David · #27 (**permalink**) 14/11/2008, 12:06

Jaja, eso es solo en caso de que a alguien se le ocurra la idea descabellada de redireccionar en vez de enviar el formulario

, naaah, broma, lo que yo deducí por el primer mensaje (y de hecho estaba en lo cierto) es que la función BuscarMedico() realizaba algún tipo de validación y después de todo enviaba el formulario. Así que el ejemplo del mensaje anterior es válida en ese caso (en el caso de descartar la idea descabellada

).