¿Cómo prevenir presionar la tecla ENTER para enviar un formulario web?

¿Cómo se evita presionar una tecla ENTER para enviar un formulario en una aplicación web?

[ revisión 2012, no hay controller en línea, preservar el área de text introducir el manejo]

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 controller de pulsaciones de tecla en el formulario:
<form […] onkeypress = "return checkEnter (event)">

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

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

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

Aquí está el código, depende de usted para pensar acerca de la accesibilidad y por qué realmente querría 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 del controller onsubmit

 <form onsubmit="return false;"> 

o si quieres un controller 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; } }); 

Tendrá que llamar a esta function que simplemente cancelará el comportamiento de envío pnetworkingeterminado del formulario. Puede adjuntarlo a cualquier campo de input o evento.

 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 ENTER simplemente activa el button de envío pnetworkingeterminado del formulario, que será el primero

 <input type="submit" /> 

el browser encuentra dentro del formulario.

Por lo tanto, no tiene un button de enviar, pero algo así como

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

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

Esto no funciona si solo tiene un campo de text, pero es posible que ese sea el comportamiento deseado en ese caso.

El otro problema es que esto depende de Javascript para enviar el formulario. Esto puede ser un problema desde el punto de vista de la accesibilidad. Esto puede resolverse escribiendo <input type='button'/> con javascript, y luego poner un <input type='submit' /> dentro de una label <noscript> . El inconveniente de este enfoque es que, para los browseres con JavaScript desactivado, tendrá presentaciones de formularios en ENTER. Depende del OP decidir cuál es el comportamiento deseado en este caso.

Sé de ninguna manera de hacer esto sin invocar javascript en absoluto.

Todas las respuestas que encontré sobre este tema, aquí o en otras publicaciones tienen un inconveniente y es que también previene el desencadenante de cambio real en el elemento de formulario. Entonces, si ejecuta estas soluciones, el evento de cambio no se activará 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 class 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"); } }); }); 

En una respuesta corta 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 desactiva la acción de presionar "Enter" para input type = 'text'. Los visitantes aún pueden usar la tecla "Enter" en todo el website.

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

Ver mi respuesta detallada para una pregunta similar aquí

 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 tu formulario:

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

Sin embargo, sería mejor si no usara JavaScript obtuso.

Pasé un time haciendo este browser cruzado para IE8,9,10, Opera 9+, Firefox 23, Safari (PC) y Safari (MAC)

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

Código base: llame a esta function mediante "onkeypress" adjunta a su formulario y pase "window.event" en ella.

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

En mi caso, este jQuery JavaScript resolvió el problema

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

Evitar que "ENTER" envíe el formulario puede ser un inconveniente para algunos de sus usuarios. Entonces sería mejor si sigues el siguiente procedimiento:

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

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

escriba la function de Javascript de la siguiente manera:

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

Sea cual sea el motivo, si desea evitar el envío del formulario al presionar la tecla Entrar, puede escribir la siguiente function en javascript:

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

Gracias.

Agregue esta label a su formulario – onsubmit="return false;" Entonces solo puede enviar su formulario con alguna function de JavaScript.

Qué tal si:

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

Por favor, consulte este artículo. ¿Cómo evitar presionar la tecla ENTRAR 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> 

Para evitar el envío de formularios al presionar enter en un área de textarea o campo de 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 tienes un button de enviar y disparas el evento con un button normal. Es mejor porque en el primer examen 2 se envían events 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(); } }); 

Siempre lo he hecho con un controller de pulsaciones de teclas como el anterior, pero hoy he encontrado una solución más simple. La tecla Intro simplemente activa el primer button de envío no desactivado en el formulario, de modo que todo lo que se requiere es interceptar el button que intenta 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 browser / campos / etc. Si se activa la lógica de input y envío, el browser encontrará ese button de envío oculto y lo activará. Y el controller de javascript evitará la sumisión.

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

Puede atrapar la key en un formulario en javascript y evitar el burbujeo par, creo. ENTER en una página web básicamente solo envía el formulario en el que se encuentra 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 desarrollador de IE9 (F12).

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

Otro enfoque es agregar el button Enviar input al formulario solo cuando se supone que se debe enviar y replacelo por un simple div durante el llenado del formulario.

Simplemente agregue este atributo a su label FORM:

 onsubmit="return gbCanSubmit;" 

Luego, en su label SCRIPT, agregue esto:

 var gbCanSubmit = false; 

Luego, cuando haces un button o por cualquier otra razón (como en una function) finalmente permites un envío, simplemente voltea el boolean global y haz una llamada a .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 } 

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

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

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 file php. El button enter / return rompe esto ya que esos valores no se envían. Entonces, estaba pensando, ¿el button de enter / return activa el primer button de enviar en el formulario? De esta forma, podría tener un button de envío "vainilla" que está oculto o tiene un valor de "nombre" que devuelve el file php de ejecución a la página con el formulario que contiene. O bien, un valor de "nombre" pnetworkingeterminado (oculto) que activa la tecla, y los botones de envío sobrescriben con sus propios valores de "nombre". Solo un pensamiento.

poner en javascript file externo

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

o en algún lugar dentro de la label corporal

 <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 text y usuarios no especializados).

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 forma, la tecla ENTER funciona como se planeó, pero se requiere una confirmación (un segundo toque de ENTER , por lo general).

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