jquery - pasar - Evita que los usuarios envíen un formulario presionando Enter

pasar de un input a otro con enter jquery

Question

Tengo una encuesta en un sitio web, y parece que hay algunos problemas con los usuarios que ingresan (no sé por qué) y que envían accidentalmente la encuesta (formulario) sin hacer clic en el botón Enviar. ¿Hay alguna manera de prevenir esto?

Estoy usando HTML, PHP 5.2.9 y jQuery en la encuesta.

Answer 1

No permitir la entrada de la clave

Si no tiene una <textarea> en su formulario, simplemente agregue lo siguiente a su <form> :

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

O con jQuery:

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

Esto hará que todas las pulsaciones de tecla dentro del formulario se verifiquen en keyCode. Si no es 13 (la tecla Intro), devolverá verdadero y todo saldrá como se esperaba. Si es 13 (la tecla Intro), devolverá falso y todo se detendrá inmediatamente, por lo que no se enviará el formulario.

Se prefiere el evento de keypress en lugar de keydown ya que solo se keydown cuando se inserta el carácter. Cuando se presiona cualquier tecla, se presionan las teclas hacia keydown (y las keyup ), 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 es necesario que compruebe explícitamente si la tecla Intro Numpad (108) también se presiona. El keyup es demasiado tarde para bloquear el envío del formulario.

Tenga en cuenta que $(window) como se sugiere en algunas otras respuestas en lugar de $(document) no funciona para keydown / keypress / keyup en IE <= 8, por lo que no es una buena opción si desea cubrir a esos usuarios pobres también.

Permitir la tecla enter en textareas solamente

Si tiene un <textarea> en su formulario (que por supuesto debería aceptar la tecla Intro), a continuación, agregue el controlador de pulsación de tecla 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, 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 con la tecla enter por alguna razón, entonces solo evite el comportamiento predeterminado del evento en lugar de devolver el valor falso, 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 las áreas de texto y enviar solo los botones

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

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

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

Answer 2

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

Answer 3

Algo que no he visto contestado aquí: cuando recorra los elementos de la página, al presionar Intro cuando llegue al botón de envío, se activará el controlador de envío de solicitudes en el formulario, pero se registrará el evento como un evento de ratón. Aquí está mi solución corta 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 funcional: https://jsfiddle.net/nemesarial/6rhogva2/

Answer 4

Creo que está bien cubierto con todas las respuestas, pero si está usando un botón con algún código de validación de JavaScript, puede simplemente configurar onpresspress del formulario para que Ingrese a su envío como se esperaba:

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

El onkeypress JS puede ser lo que necesites hacer. No hay necesidad de un cambio global más grande. Esto es especialmente cierto si no eres el único que codifica la aplicación desde cero, y te han arreglado el sitio web de otra persona sin destrozarlo y volver a probarlo.

Answer 5

Dando a la forma una acción de ''javascript: void (0);'' Parece funcionar

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

Answer 6

En lugar de evitar que los usuarios presionen Intro , lo que puede parecer poco natural, puede dejar el formulario tal como está y agregar una validación adicional del lado del cliente: cuando la encuesta no finaliza, el resultado no se envía al servidor y el usuario recibe un mensaje agradable. indicando lo que necesita ser completado para completar el formulario. Si está utilizando jQuery, pruebe el complemento de validación:

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

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

Answer 7

En mi caso específico tuve que evitar que ENTER enviara el formulario y también simular el clic del botón enviar. Esto se debe a que el botón Enviar tenía un controlador de clic en él porque estábamos dentro de una ventana modal (código antiguo heredado). En cualquier caso, aquí están mis soluciones de combo 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.

Answer 8

En mi caso, tenía un par de campos de autocompletado de jQuery UI y áreas de texto en un formulario, así que definitivamente quería que aceptaran Enter . Así que eliminé la entrada type="submit" de un formulario y agregué un ancla <a href="" id="btn">Ok</a> 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 obligatorios, validateData() tiene éxito y el formulario se envía.

Answer 9

Es mi solución para alcanzar la meta, es limpia y efectiva.

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

Answer 10

Esto funciona para mi

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

Answer 11

Esto me ha funcionado en todos los navegadores después de mucha frustración con otras soluciones. La función externa name_space 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!'');}
);
});

Answer 12

Me gustaría agregar 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 menos).

Answer 13

Necesitaba evitar que solo se enviaran entradas específicas, así que usé un selector de clase, para permitir que esta sea una característica "global" donde la necesito.

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

Y este código jQuery:

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

Alternativamente, si keydown es insuficiente:

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

Algunas notas:

Aquí, modificando varias respuestas keydown , la tecla Intro parece funcionar para keydown el keydown en todos los navegadores. Para la alternativa, actualicé bind() al método on() .

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

Answer 14

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

Mas bien usa esto

<input type="button">

que usar este

<input type="submit">

Answer 15

No puedo comentar aún, así que voy a publicar una nueva respuesta

La respuesta aceptada es correcta, pero no se detuvo el envío en el teclado numérico. Al menos en la versión actual de Chrome. Tuve que alterar la condición del código clave para esto, entonces funciona.

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

Answer 16

Podría hacer un método de JavaScript para verificar si se presionó la tecla Intro y, si lo está, 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 de envío.

Answer 17

Puede utilizar un método como

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

Al leer los comentarios en la publicación original, para que sea más utilizable y permita que las personas presionen Intro si han completado todos los campos:

function validationFunction() {
$(''input'').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});

Answer 18

SOLO SE PUEDE ENVIAR EN BLOQUEO pero no en otra funcionalidad importante de la clave de ingreso, 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;
}
})
}

Answer 19

Si usa un script para hacer el envío real, entonces puede agregar una línea "devolver falso" al controlador onsubmit de esta manera:

<form onsubmit="return false;">

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

Answer 20

Tuve que capturar los tres eventos relacionados con presionar las teclas para evitar que se envíe 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(); }
});

Answer 21

Tuve un problema similar, donde tuve una cuadrícula con "campos de texto ajax" (Yii CGridView) y solo un botón de envío. Cada vez que hice una búsqueda en un campo de texto y presioné, ingresé al formulario enviado. Tenía 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 eliminar type="submit" y poner onclick="document.forms[0].submit()

Answer 22

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. Aún puede tener otro <button type=submit> para enviar el formulario. Solo devuelve true para enviar en cascada la sumisión.
5. Si presiona Intro mientras el botón de envío real está enfocado, se activará el botón de envío real.
6. Presionando Enter dentro de <textarea> u otros controles de formulario se comportarán de manera normal.
7. Al presionar Intro dentro de <input> controles de formulario <input> se activará 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>

Answer 23

Una solución jQuery simple y agradable:

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

Answer 24

Utilizar:

$(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 en un sitio web (también en formularios insertados con Ajax), evitando solo ingresar s en los textos de entrada. Colóquelo en una función de documento listo, y olvide este problema de por vida.

Answer 25

Utilizar:

// 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>

Answer 26

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

La pregunta es cómo deshabilitar el envío al presionar la tecla Enter . No cómo ignorar Enter en una aplicación completa. Así que considere adjuntar el controlador a un elemento de formulario, no a la ventana.

La desactivación de Enter para el envío de formularios debería permitir lo siguiente:

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

Esto es solo 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;
}
});

Answer 27

La Sección 4.10.22.2 El envío implícito de la especificación W3C HTML5 dice:

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

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas, presionar la tecla "ingresar" mientras un campo de texto está enfocado implícitamente envía el formulario), entonces hacerlo para un formulario cuyo botón predeterminado tiene una activación definida el comportamiento debe hacer que el agente de usuario ejecute pasos de activación de clic sintéticos en ese botón predeterminado .

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

Por lo tanto, 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 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.