¿Cómo evitar que se presione ENTER para enviar un formulario web?

¿Cómo evita que una ENTERpulsación de tecla envíe un formulario en una aplicación basada en la web?

[ revisión 2012, sin manejador en línea, preservar manejo de ingreso de área de texto]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Ahora puede definir un controlador de pulsación de tecla en el formulario:
<form [...] onkeypress = "return checkEnter (event)">

document.querySelector('form').onkeypress = checkEnter;

Aquí hay un controlador jQuery que se puede usar para detener el ingreso de envíos y también detener la tecla de retroceso -> atrás. Los pares (keyCode: selectorString) en el objeto "keyStop" se utilizan para hacer coincidir los nodos que no deberían activar su acción predeterminada.

Recuerde que la web debe ser un lugar accesible, y esto está rompiendo las expectativas de los usuarios de teclados. Dicho esto, en mi caso, a la aplicación web en la que estoy trabajando no le gusta el botón Atrás de todos modos, por lo que deshabilitar su atajo de teclado está bien. La discusión "debería entrar -> enviar" es importante, pero no está relacionada con la pregunta real formulada.

¡Aquí está el código, para que pienses en la accesibilidad y por qué realmente querrías hacer esto!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Simplemente devuelva falso desde el controlador de envío

<form onsubmit="return false;">

o si quieres un controlador en el medio

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Deberá llamar a esta función que cancelará el comportamiento de envío predeterminado del formulario. Puede adjuntarlo a cualquier campo o evento de entrada.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

La tecla ENTRAR simplemente activa el botón de envío predeterminado del formulario, que será el primero

<input type="submit" />

el navegador encuentra dentro del formulario.

Por lo tanto, no tengo un botón de enviar, sino algo como

<input type="button" value="Submit" onclick="submitform()" /> 

EDITAR : En respuesta a la discusión en los comentarios:

Esto no funciona si solo tiene un campo de texto, pero puede ser ese el comportamiento deseado en ese caso.

El otro problema es que esto se basa en Javascript para enviar el formulario. Esto puede ser un problema desde el punto de vista de accesibilidad. Esto se puede resolver escribiendo <input type='button'/>javascript y luego poner un <input type='submit' />dentro de una <noscript>etiqueta. El inconveniente de este enfoque es que para los navegadores con JavaScript deshabilitado, tendrá envíos de formularios en ENTER. Depende del OP decidir cuál es el comportamiento deseado en este caso.

No conozco ninguna forma de hacerlo sin invocar javascript en absoluto.

En resumen, la respuesta en Javascript puro es:

<script type="text/javascript">
    window.addEventListener('keydown', function(e) {
        if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
                e.preventDefault();
                return false;
            }
        }
    }, true);
</script>

Esto solo deshabilita la acción de presionar la tecla "Enter" para input type = 'text'. Los visitantes aún pueden usar la tecla "Enter" en todo el sitio web.

Si desea deshabilitar "Enter" para otras acciones también, puede agregar console.log (e); para sus propósitos de prueba, y presione F12 en Chrome, vaya a la pestaña "consola" y presione "retroceso" en la página y mire dentro para ver qué valores se devuelven, luego puede apuntar a todos esos parámetros para mejorar aún más el código arriba para satisfacer sus necesidades de "e.target.nodeName" , "e.target.type" y muchos más ...

Vea mi respuesta detallada para una pregunta similar aquí

Todas las respuestas que encontré sobre este tema, aquí o en otras publicaciones tienen un inconveniente y es que también evita el desencadenante de cambio real en el elemento del formulario. Entonces, si ejecuta estas soluciones, el evento onchange no se activa también. Para superar este problema, modifiqué estos códigos y desarrollé el siguiente código para mí. Espero que esto sea útil para otros. Di una clase a mi formulario "prevent_auto_submit" y agregué el siguiente JavaScript:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

Siempre lo he hecho con un controlador de pulsación de teclas como el anterior en el pasado, pero hoy encontré una solución más simple. La tecla Intro solo activa el primer botón de envío no deshabilitado en el formulario, por lo que en realidad todo lo que se requiere es interceptar ese botón tratando de enviar:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

Eso es. Las pulsaciones de teclas se manejarán como de costumbre por el navegador / campos / etc. Si se activa la lógica de ingresar-enviar, entonces el navegador encontrará ese botón de envío oculto y lo activará. Y el controlador de JavaScript evitará la sumisión.

He pasado algún tiempo haciendo este navegador cruzado para IE8,9,10, Opera 9+, Firefox 23, Safari (PC) y Safari (MAC)

Ejemplo de JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Código base: llame a esta función a través de "onkeypress" adjunta a su formulario y pase "window.event".

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

Luego en su formulario:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

Sin embargo, sería mejor si no usaras JavaScript molesto.

En mi caso, este JavaScript jQuery resolvió el problema

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

Evitar que "ENTRAR" envíe el formulario puede incomodar a algunos de sus usuarios. Por lo tanto, sería mejor si sigue el siguiente procedimiento:

Escriba el evento 'onSubmit' en su etiqueta de formulario:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

escriba la función Javascript de la siguiente manera:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Cualquiera sea el motivo, si desea evitar el envío del formulario al presionar la tecla Intro, puede escribir la siguiente función en javascript:

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

Gracias.

Agregue esta etiqueta a su formulario: onsubmit="return false;" entonces solo puede enviar su formulario con alguna función de JavaScript.

Para evitar el envío de formularios al presionar enterun campo textareao input, verifique el evento de envío para encontrar qué tipo de elemento envió el evento.

Ejemplo 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Una mejor solución es si no tiene un botón de envío y activa el evento con un botón normal. Es mejor porque en el primer ejemplo se disparan 2 eventos de envío, pero en el segundo ejemplo solo se dispara 1 evento de envío.

Ejemplo 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

Encontrará esto más simple y útil: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

Qué tal si:

<asp:Button ID="button" UseSubmitBehavior="false"/>

Consulte este artículo ¿Cómo evitar que se presione ENTER para enviar un formulario web?

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

Puede atrapar el keydown en un formulario en javascript y evitar incluso el burbujeo, creo. ENTER en una página web básicamente solo envía el formulario en el que se coloca el control seleccionado actualmente.

Este enlace proporciona una solución que me ha funcionado en Chrome, FF e IE9 más el emulador para IE7 y 8 que viene con la herramienta de desarrollo de IE9 (F12).

http://webcheatsheet.com/javascript/disable_enter_key.php

Otro enfoque es agregar el botón de entrada de envío al formulario solo cuando se supone que debe enviarse y reemplazarlo por un simple div durante el llenado del formulario

Simplemente agregue este atributo a su etiqueta FORM:

onsubmit="return gbCanSubmit;"

Luego, en su etiqueta SCRIPT, agregue esto:

var gbCanSubmit = false;

Luego, cuando haces un botón o por cualquier otra razón (como en una función) finalmente permites un envío, simplemente voltea el booleano global y haz una llamada .submit (), similar a este ejemplo:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

Me he encontrado con esto porque tengo varios botones de envío con diferentes valores de 'nombre', de modo que cuando se envían hacen cosas diferentes en el mismo archivo php. El botón enter/ returnrompe esto ya que esos valores no se envían. Entonces estaba pensando, ¿el botón enter/ returnactiva el primer botón de envío en el formulario? De esa manera, podría tener un botón de envío 'vainilla' que está oculto o tiene un valor de 'nombre' que devuelve el archivo php en ejecución a la página con el formulario en él. O bien, un valor de 'nombre' predeterminado (oculto) que activa la pulsación de tecla, y los botones de envío se sobrescriben con sus propios valores de 'nombre'. Solo un pensamiento.

Qué tal si:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

Y simplemente asigne un nombre correcto a su botón y aún se enviará, pero los campos de texto, es decir, el objetivo original explícito cuando presiona regresar en uno, no tendrán el nombre correcto.

Esto funcionó para mí.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

Así es como lo haría:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

poner en un archivo externo javascript

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

o en algún lugar dentro de la etiqueta del cuerpo

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Tuve el mismo problema (formularios con toneladas de campos de texto y usuarios no calificados).

Lo resolví de esta manera:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

usando esto en el código HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

De esta manera, la ENTERclave funciona según lo planeado, pero una confirmación (un segundoENTER se requiere toque, generalmente).

Dejo a los lectores la búsqueda de un script que envíe al usuario en el campo donde presionó ENTERsi decide permanecer en el formulario.