Hacer la tecla Intro en un formulario HTML enviar en lugar de activar el botón

Question

Tengo un formulario HTML con una sola entrada submit, pero también varios elementos button. Cuando el usuario presiona la tecla 'enter', espero que realmente envíe el formulario, pero en su lugar (dentro de Chrome 15 al menos) descubro que está activando el primer button (ya que eso ocurre antes en el HTML que el submit de entrada, supongo).

sé que en general no se puede obligar a los navegadores para favorecer un submit entrada particular, pero realmente pensé que estarían a favor submit entradas sobre button elementos. ¿Hay alguna pequeña modificación que pueda hacer en el HTML para que esto funcione, o voy a tener que adoptar algún tipo de enfoque de Javascript?

Aquí hay una maqueta aproximada del HTML:

<form action="form.php" method="POST"> 
    <input type="text" name="field1"/> 
    <button onclick="return myFunc1()">Button 1</button> 
    <input type="submit" name="go" value="Submit"/> 
</form> 

Answer 1

Puede usar jQuery:

$(function() { 
    $("form input").keypress(function (e) { 
     if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
      $('button[type=submit] .default').click(); 
      return false; 
     } else { 
      return true; 
     } 
    }); 
}); 

Answer 2

Prueba de esto, si la tecla enter se presionó puede capturarlo como éste por ejemplo, he desarrollado una respuesta el otro día html button specify selected, vea si esto ayuda.

Especifique el nombre del formulario como por ejemplo yourFormName, entonces debería poder enviar el formulario sin tener que centrarse en el formulario.

document.onkeypress = keyPress; 

function keyPress(e){ 
    var x = e || window.event; 
    var key = (x.keyCode || x.which); 
    if(key == 13 || key == 3){ 
    // myFunc1(); 
    document.yourFormName.submit(); 
    } 
} 

Answer 3

Teniendo en cuenta sólo hay una (o potencialmente con esta solución ni siquiera uno) botón de enviar, la solución se basa aquí jQuery que funcione para múltiples formas en la misma página ...

<script type="text/javascript"> 
    $(document).ready(function() { 

     var makeAllFormSubmitOnEnter = function() { 
      $('form input, form select').live('keypress', function (e) { 
       if (e.which && e.which == 13) { 
        $(this).parents('form').submit(); 
        return false; 
       } else { 
        return true; 
       } 
      }); 
     }; 

     makeAllFormSubmitOnEnter(); 
    }); 
</script> 

Answer 4

No necesita JavaScript para elegir su botón o entrada de envío predeterminado. Solo necesita marcarlo con type="submit", y los otros botones marcarlos con type="button". En su ejemplo:

<button type="button" onclick="return myFunc1()">Button 1</button> 
<input type="submit" name="go" value="Submit"/> 

Answer 5

Acabo de dar un giro tanto en Chrome y Firefox como en IE10.

Como se mencionó anteriormente, asegúrese de haber marcado con tipo = "botón", "restablecer", "enviar", etc. para asegurarse de que se conecta en cascada correctamente y elige el botón correcto.

Tal vez también configurar todos ellos tienen la misma forma (es decir, todo lo que funcionó para mí)

Answer 6

me acaba de golpear un problema con esto. La mía fue una caída fuera de cambiar el input a un button y que había tenido un mal escrito terminador /> etiqueta:

así que tuve:

<button name="submit_login" type="submit" class="login" />Login</button> 

Y sólo han modificado a:

<button name="submit_login" type="submit" class="login">Login</button> 

ahora trabaja como un encanto, siempre las cosas pequeñas molestas ... HTH

Answer 7

$("form#submit input").on('keypress',function(event) { 
    event.preventDefault(); 
    if (event.which === 13) { 
    $('button.submit').trigger('click'); 
    } 
});