Evitar que los usuarios envíen un formulario pulsando Enter

No permitir entrar tecla en cualquier lugar

Si no tienes un <textarea> en tu formulario, simplemente agrega lo siguiente a tu <form>:

<form ... onkeypress="return event.keyCode != 13;">

O con jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

Esto hará que cada pulsación de tecla dentro del formulario se compruebe en el código de la tecla. Si no es 13 (la tecla Enter), entonces devolverá true y cualquier cosa saldrá como se esperaba. Si es 13 (la tecla Enter), entonces devolverá false y cualquier cosa se detendrá inmediatamente, por lo que el formulario no será presentar.

El evento keypress se prefiere a keydown ya que solo se dispara cuando el carácter se está insertando. Los keydown (y keyup) se disparan cuando se presiona cualquier tecla, incluidas las teclas de control. Y, el keyCode de keypress representa el carácter real que se inserta, no la clave física utilizada. De esta manera no necesita verificar explícitamente si la tecla Enter del teclado numérico (108) también está presionada. El keyup es demasiado tarde para bloquear el envío del formulario.

Tenga en cuenta que $(window) como sugerido en algunas otras respuestas en lugar de $(document) no funciona para keydown/keypress/keyup en IE

Permitir la tecla enter solo en áreas de texto

Si tienes un <textarea> en tu formulario (que por supuesto debería aceptar la tecla Enter), entonces agrega el manejador keypress a cada elemento de entrada individual que no sea un<textarea>.

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

Para reducir la repetición, esto es mejor hacerlo con jQuery:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

Si tiene otras funciones de controlador de eventos adjuntas en esos elementos de entrada, que también le gustaría invocar en la tecla enter por alguna razón, entonces solo evite el comportamiento predeterminado de event en lugar de devolver false, para que pueda propagarse correctamente a otros controladores.

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

Permitir la tecla enter en áreas de texto y enviar solo botones

Si también desea permitir la tecla enter en los botones de envío <input|button type="submit">, siempre puede refinar el selector como debajo.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

Tenga en cuenta que input[type=text] como se sugiere en algunas otras respuestas no cubre esas entradas HTML5 que no son de texto, por lo que no es un buen selector.

Tuve que capturar los tres eventos relacionados con presionar las teclas para evitar que se enviara el formulario:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Puedes combinar todo lo anterior en una bonita versión compacta:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Si usa un script para hacer el envío real, entonces puede agregar la línea "return false" al controlador onubmit de la siguiente manera:

<form onsubmit="return false;">

Llamar a submit() en el formulario desde JavaScript no activará el evento.

Uso:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Esta solución funciona en todos los formularios de un sitio web (también en los formularios insertados con Ajax), evitando solo Introducirs en los textos de entrada. Colóquelo en una función de documento listo, y olvide este problema para toda la vida.

En lugar de evitar que los usuarios presionen Enter, lo que puede parecer antinatural, puede dejar el formulario tal como está y agregar una validación adicional del lado del cliente: Cuando la encuesta no termina, el resultado no se envía al servidor y el usuario recibe un mensaje agradable que le dice lo que debe terminar para completar el formulario. Si está utilizando jQuery, pruebe el plugin de validación:

Http://docs.jquery.com/Plugins/Validation

Esto requerirá más trabajo que la captura de la Ingrese el botón, pero seguramente proporcionará una experiencia de usuario más rica.

Una pequeña y sencilla solución de jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Todavía no puedo comentar, así que publicaré una nueva respuesta

La respuesta aceptada es ok-ish, pero no estaba deteniendo submit en numpad enter. Al menos en la versión actual de Chrome. Tuve que alterar la condición del código clave a esto, entonces funciona.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Es mi solución alcanzar la meta, es limpio y eficaz.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Un enfoque completamente diferente:

1. El primer <button type="submit"> en el formulario se activará al presionar Enter.
2. Esto es cierto incluso si el botón está oculto con style="display:none;
3. El script para ese botón puede devolver false, lo que aborta el proceso de envío.
4. , todavía puede tener otro <button type=submit> para enviar el formulario. Simplemente devuelva true para conectar en cascada el envío.
5. Presionando Enter mientras que el real enviar el botón está enfocado activará el botón de envío real.
6. Presionando Enter dentro de <textarea> u otros controles de formulario se comportarán de forma normal.
7. Presionando Enter dentro de <input> los controles de formulario activarán el primer <button type=submit>, que devuelve false, y por lo tanto no sucede nada.

Así:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Dar a la forma una acción de ' javascript: void(0);' parece hacer el truco

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

La sección 4.10.22.2 Envío implícito de la especificación HTML5 del W3C dice:

A form el botón predeterminado del elemento es el primer botón de envío en orden de árbol cuyo propietario del formulario es form elemento.

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas, presionar la tecla" enter " mientras un campo de texto está enfocado envía implícitamente el formulario), un formulario cuyo botón predeterminadotiene un comportamiento de activación definidodebe hacer que el agente de usuario ejecute pasos de activación de clic sintéticoen ese botón predeterminado.

Nota: En consecuencia, si el botón predeterminado está desactivado, el formulario no se envía cuando se utiliza un mecanismo de envío implícito. (Un botón no tiene un comportamiento de activación cuando está desactivado.)

Por lo tanto, un una forma compatible con los estándares para deshabilitar cualquier envío implícito del formulario es colocar un botón de envío deshabilitado como el primer botón de envío en el formulario:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Una buena característica de este enfoque es que funciona sin JavaScript; ya sea que JavaScript esté habilitado o no, se requiere un navegador web que cumpla con los estándares para evitar el envío implícito de formularios.

Necesitaba evitar que solo se enviaran entradas específicas, por lo que utilicé un selector de clases, para permitir que esta sea una característica "global" donde sea que la necesite.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Y este código jQuery:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternativamente, si el keydown es insuficiente:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Algunas notas:

Modificando varias respuestas buenas aquí, la tecla Enter parece funcionar para keydown en todos los navegadores. Para la alternativa, he actualizado bind() al método on().

Soy un gran fan de la clase selectores, sopesando todos los pros y contras y discusiones de rendimiento. Mi convención de nomenclatura es 'idSomething' para indicar que jQuery lo está usando como un id, para separarlo del estilo CSS.

1. No utilice type="submit" para entradas o botones.
2. Use type="button" y use js [Jquery/angular/etc] para enviar el formulario al servidor.

Podría hacer un método JavaScript para comprobar si la tecla Enter fue pulsada, y si lo es, para detener el envío.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Simplemente llame a eso en el método submit.

No poner un botón de envío podría hacer. Simplemente coloque un script en la entrada (type = button) o agregue EventListener si desea que envíe los datos en el formulario.

En lugar de utilizar esto

<input type="button">

Que usar este

<input type="submit">

Tuve un problema similar, donde tenía una cuadrícula con "ajax textfields" (Yii CGridView) y solo un botón de envío. Cada vez que hice una búsqueda en un campo de texto y pulse entrar en el formulario enviado. Tuve que hacer algo con el botón porque era el único botón común entre las vistas (patrón MVC). Todo lo que tenía que hacer era quitar type="submit" y poner onclick="document.forms[0].submit()

Creo que está bien cubierto con todas las respuestas, pero si está utilizando un botón con algún código de validación de JavaScript, puede configurar onkeypress del formulario para Enter para llamar a su envío como se espera:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

El onkeypress JS podría ser lo que necesites hacer. No hay necesidad de un cambio global más grande. Esto es especialmente cierto si no eres el que codifica la aplicación desde cero, y has sido traído a arreglar el sitio web de otra persona sin destrozarlo y volver a probar se.

En mi caso específico tuve que evitar que ENTER enviara el formulario y también simular el clic en el botón enviar. Esto se debe a que el botón submit tenía un controlador de clics porque estábamos dentro de una ventana modal (código antiguo heredado). En cualquier caso, aquí están mis soluciones combinadas para este caso.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Este caso de uso es especialmente útil para las personas que trabajan con IE8.

Esto funciona para mí

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Algo que no he visto contestado aquí: cuando se tabula a través de los elementos de la página, pulsando Enter cuando se llega al botón enviar se activará el controlador onubmit en el formulario, pero se registrará el evento como un MouseEvent. Aquí está mi breve solución para cubrir la mayoría de las bases:

Esta no es una respuesta relacionada con jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Para encontrar un ejemplo de trabajo: https://jsfiddle.net/nemesarial/6rhogva2 /

Me gustaría añadir un poco de código CoffeeScript (no probado en el campo):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Espero que te guste el buen truco en la cláusula unless.)

Ya hay muchas buenas respuestas aquí, solo quiero contribuir algo desde una perspectiva de UX. Los controles de teclado en los formularios son muy importantes.

La pregunta es cómo desactivar el envío al pulsar la tecla Enter. No cómo ignorar Enter en una aplicación completa. Por lo tanto, considere adjuntar el controlador a un elemento de formulario, no a la ventana.

Deshabilitar Enter para el envío de formularios debería permitir lo siguiente:

1. Formulario de envío a través de Enter cuando enviar el botón está enfocado.
2. Envío del formulario cuando se rellenan todos los campos.
3. Interacción con botones que no se envían a través de Enter.

Esto es simplemente repetitivo, pero sigue las tres condiciones.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

SOLO BLOQUEAR ENVIAR pero no otra funcionalidad importante de la tecla enter, como crear un nuevo párrafo en un <textarea>:

window.addEventListener('keydown', function(e){
    //set default value for variable that will hold the status of keypress
    pressedEnter = false;

    //if user pressed enter, set the variable to true
    if(event.keyCode == 13)
        pressedEnter = true;

    //we want forms to disable submit for a tenth of a second only
    setTimeout(function(){
        pressedEnter = false;
    },100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for(i = 0; i < forms.length; i++){
    //listen to submit event
    forms[i].addEventListener('submit', function(e){
        //if user just pressed enter, stop the submit event
        if(pressedEnter == true) {
            e.preventDefault();
            return false;
        }
    })
}

Esto ha funcionado para mí en todos los navegadores después de mucha frustración con otras soluciones. La función name_space outer es solo para evitar declarar globales, algo que también recomiendo.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Uso de la muestra:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

En mi caso he tenido un par de jQuery UI autocompletar campos y textareas en un formulario, así que definitivamente quería aceptar Introduce. Así que eliminé la entrada type="submit" de un formulario y agregué un ancla <a href="" id="btn">Ok</a> en su lugar. Luego lo diseñé como un botón y agregué el siguiente código:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Si un usuario llena todos los campos requeridos, validateData() tiene éxito y el formulario se envía.

Uso:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>