Hacer que la tecla Enter en un formulario HTML se envíe en lugar de activar el botón

Tengo un formulario HTML con una sola submitentrada, pero también varios buttonelementos. Cuando el usuario presiona la tecla 'enter', esperaría que realmente envíe el formulario, pero en cambio (al menos dentro de Chrome 15) descubro que está activando el primero button(ya que eso ocurre antes en el HTML que en la submitentrada , Supongo).

Sé que, en general, no se puede obligar a los navegadores a favorecer una submitentrada en particular , pero realmente pensé que favorecerían las submitentradas sobre los buttonelementos. ¿Hay algún pequeño ajuste que pueda hacer al HTML para que esto funcione, o tendré 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>

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

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

Puedes 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;
        }
    });
});

Pruebe esto, si se presionó la tecla enter, puede capturarlo así, por ejemplo, desarrollé una respuesta el otro día, el botón html especifique seleccionado , vea si esto ayuda.

Especifique el nombre del formulario, por ejemplo, yourFormNameentonces 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();
  }
}

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

Acabo de encontrar un problema con esto. La mía fue una caída al cambiar de inputa a buttony tenía un />terminador de etiquetas mal escrito :

Entonces tuve:

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

Y lo acabo de modificar para:

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

Ahora funciona como un encanto, siempre las pequeñas cosas molestas ... HTH

Dado que solo hay un botón de envío (o con esta solución potencialmente ni siquiera uno), aquí hay una solución basada en jQuery que funcionará para múltiples formularios 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>

Le di un giro a esto tanto en Chrome como en Firefox e IE10.

Como se mencionó anteriormente, asegúrese de haber marcado con type = "button", "reset", "submit", etc. para asegurarse de que se conecte correctamente en cascada y elija el botón correcto.

Quizás también configurar todos ellos para que tengan la misma forma (es decir, todos como eso funcionó para mí)