Foros del Web » Creando para Internet » HTML »

Pulsar ENTER para boton

Estas en el tema de Pulsar ENTER para boton en el foro de HTML en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 14/11/2008, 06:58
 
Fecha de Ingreso: mayo-2008
Mensajes: 75
Antigüedad: 9 años, 6 meses
Puntos: 0
Pulsar ENTER para boton

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?
  #2 (permalink)  
Antiguo 14/11/2008, 09:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

Mira este código de ejemplo, a ver si te sirve de orientación para adaptarlo. Supongo que lo entenderás.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 14/11/2008, 09:46
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

Yo opino... que es mejor usar un input type submit y te ahorras el trabajo de capturar los eventos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #4 (permalink)  
Antiguo 14/11/2008, 09:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

¿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
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 14/11/2008, 09:52
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

Así es Mikmoro. Funciona sin necesidad de ir con el tabulador al submit..
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 14/11/2008, 09:53
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Pulsar ENTER para boton

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 14/11/2008, 10:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

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á.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 14/11/2008, 10:38
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

Podría ser así:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Formulario</title>
  4. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
  5. <script type="text/javascript">
  6. window.onload = function() { document.formclave.onsubmit = acceso; }
  7. function acceso(){
  8. alert(document.formclave.clave.value);
  9. }
  10. <style type="text/css">
  11. .oculto {display: none;}
  12. </head>
  13. <form name="formclave">
  14. <input class="oculto"/>
  15. <input type="text" name="clave" />
  16. <input name="button" type="submit" value="Acceder" />
  17. </form>
  18. </body>
  19. </html>
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Última edición por David; 14/11/2008 a las 10:46 Razón: En un caso real, la idea es enviar el formulario.
  #9 (permalink)  
Antiguo 14/11/2008, 10:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

Pues eso es justo lo que estaba probando, y no me chuta. No sé cuál es el error.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 14/11/2008, 10:47
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #11 (permalink)  
Antiguo 14/11/2008, 10:48
 
Fecha de Ingreso: mayo-2008
Mensajes: 75
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Pulsar ENTER para boton

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" /> 
  #12 (permalink)  
Antiguo 14/11/2008, 10:50
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Pulsar ENTER para boton

No estoy seguro, pero creo recordar que eso impide usar el tabulador para desplazarse entre botones
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #13 (permalink)  
Antiguo 14/11/2008, 10:51
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #14 (permalink)  
Antiguo 14/11/2008, 10:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

Cita:
Iniciado por David el Grande Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 14/11/2008, 10:53
 
Fecha de Ingreso: mayo-2008
Mensajes: 75
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Pulsar ENTER para boton

Cita:
Iniciado por daPhyre Ver Mensaje
No estoy seguro, pero creo recordar que eso impide usar el tabulador para desplazarse entre botones
No, no problem
  #16 (permalink)  
Antiguo 14/11/2008, 10:55
 
Fecha de Ingreso: mayo-2008
Mensajes: 75
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Pulsar ENTER para boton

Cita:
Iniciado por David el Grande Ver Mensaje
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;
  #17 (permalink)  
Antiguo 14/11/2008, 10:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

Cita:
Iniciado por matheo Ver Mensaje
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".
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 14/11/2008, 10:59
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Formulario</title>
  4. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
  5. <script type="text/javascript">
  6. window.onload = function() { document.formclave.onsubmit = acceso; }
  7. function acceso(evt){
  8. if (evt) { evt.preventDefault(); } else { event.returnValue = false; }
  9. location.href = "http://" + document.formclave.clave.value;
  10. }
  11. <style type="text/css">
  12. .oculto {display: none;}
  13. </head>
  14. <form name="formclave">
  15. <input class="oculto"/>
  16. <input type="text" name="clave" />
  17. <input name="button" type="submit" value="Acceder" />
  18. </form>
  19. </body>
  20. </html>
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #19 (permalink)  
Antiguo 14/11/2008, 11:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

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
__________________
Visita mi nueva web idplus.org
  #20 (permalink)  
Antiguo 14/11/2008, 11:12
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #21 (permalink)  
Antiguo 14/11/2008, 11:27
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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? .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #22 (permalink)  
Antiguo 14/11/2008, 11:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

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.
__________________
Visita mi nueva web idplus.org
  #23 (permalink)  
Antiguo 14/11/2008, 11:31
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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

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

Saludos .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Última edición por David; 14/11/2008 a las 11:32 Razón: Era el 16, no el 14.
  #24 (permalink)  
Antiguo 14/11/2008, 11:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

Claro, ya lo he resaltado. Pero...

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

__________________
Visita mi nueva web idplus.org
  #25 (permalink)  
Antiguo 14/11/2008, 11:43
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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
  1. <form name="algo">
  2. <input type="text" name="campo" onkeypress="saltar(event)" />
  3. <input type="button" onclick="acceso()" name="Enviar" />
  4. </form>
Código javascript:
Ver original
  1. function saltar(e) {
  2. tecla = (document.all) ? e.keyCode : e.which;
  3. if (tecla==13) acceso();
  4. }
  5. function acceso() { document.algo.submit() }
Usando un botón submit:
Código html:
Ver original
  1. <form name="algo">
  2. <input type="text" name="campo" />
  3. <input type="submit" value="Enviar" />
  4. </form>
Código javascript:
Ver original
  1. /* Pues, que no hace falta :-) */
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #26 (permalink)  
Antiguo 14/11/2008, 11:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pulsar ENTER para boton

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

Cita:
<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>
No me tangues
__________________
Visita mi nueva web idplus.org
  #27 (permalink)  
Antiguo 14/11/2008, 12:06
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Pulsar ENTER para boton

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 ).
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:03.