Pregunta Evite que los usuarios envíen un formulario al presionar Entrar


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

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


608
2018-05-21 21:09


origen


Respuestas:


Puedes usar 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 útil y permita a las personas presionar Entrar 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;
    }
  });
});

723
2018-05-21 21:19



No permitir ingresar la clave en cualquier lugar

Si no tienes un <textarea> en su forma, solo 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 cada pulsación de tecla dentro del formulario se verificará en el código clave. Si no es 13 (la tecla Enter), volverá a ser verdadero y todo saldrá como se espera. Si es 13 (la tecla Intro), devolverá falso y todo se detendrá inmediatamente, por lo que no se enviará el formulario.

los keypress evento es preferido sobre keydown ya que esto solo se activa cuando el personaje se está insertando. los keydown (y keyup) son despedidos cuando alguna se presiona la tecla, incluidas las teclas de control. Y el keyCode de keypress representa el carácter real que se está insertando, no la clave física utilizada. De esta forma, no es necesario que compruebe explícitamente si también se presiona la tecla Entrar en el teclado numérico (108). los keyup es demasiado tarde para bloquear el envío de formularios.

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 también quieres cubrir a esos usuarios pobres.

Permitir ingresar clave solo en áreas de texto

Si tienes un <textarea> en su forma (que por supuesto debería acepte la tecla Intro), luego agregue el controlador de pulsación de tecla a cada elemento de entrada individual que no es un <textarea>.

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

Para reducir el texto estándar, es mejor hacerlo con jQuery:

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

Si tiene otras funciones del controlador de eventos adjuntas a esos elementos de entrada, que también desea invocar al ingresar la clave por alguna razón, entonces solo evite el comportamiento predeterminado del evento en lugar de devolver falso, para que pueda propagarse adecuadamente a otros controladores.

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

Permitir ingresar clave en áreas de texto y solo enviar botones

Si desea permitir la tecla Intro en los botones de enviar <input|button type="submit"> también, entonces siempre puede refinar el selector de la siguiente manera.

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

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


466
2017-12-29 21:42



Tuve que atrapar los tres eventos relacionados con presionar las teclas para evitar que se envíe el formulario:

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

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

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

56
2018-03-27 13:57



Si usa un script para hacer el envío real, puede agregar la línea "return false" al manejador onsubmit como este:

<form onsubmit="return false;">

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


41
2017-07-24 16:29



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), previniendo solo Entrars en textos de entrada. Colóquelo en una función lista para documentos y olvide este problema por una vida.


21
2018-05-30 12:36



En lugar de evitar que los usuarios presionen Entrar, 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 finaliza, el resultado no se envía al servidor y el usuario recibe un mensaje agradable que le indica qué debe completarse para Complete el formulario. Si está utilizando jQuery, pruebe el complemento Validation:

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

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


19
2018-05-21 21:35



No puedo comentar todavía, así que publicaré una nueva respuesta

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

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

16
2017-08-07 21:28



Una buena y sencilla solución de jQuery:

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

15
2017-12-09 20:35



Un enfoque completamente diferente:

  1. El primero <button type="submit"> en el formulario se activará al presionar Entrar.
  2. Esto es cierto incluso si el botón está oculto style="display:none;
  3. El script para ese botón puede regresar false, lo que aborta el proceso de envío.
  4. Aún puedes tener otro <button type=submit> para enviar el formulario Solo regresa true para poner en cascada la presentación.
  5. Prensado Entrar mientras que el botón de envío real está enfocado activará el botón de envío real.
  6. Prensado Entrar dentro <textarea> u otros controles de forma se comportarán de forma normal.
  7. Prensado Entrar dentro <input> controles de forma activarán la primera <button type=submit>, que regresa false, y por lo tanto, nada sucede.

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>

8
2018-02-20 11:28



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>

7
2018-04-27 11:49



Es mi solución para alcanzar el objetivo, es limpio y efectivo.

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

7
2018-03-23 23:57