Evite que los usuarios envíen un formulario presionando Enter

Tengo una encuesta en un sitio web, y parece haber algunos problemas con los usuarios presionando enter (no sé por qué) y enviando 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.

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 permitir que las personas presionen Entersi 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;
    }
  });
});

No permitir la tecla Intro en cualquier lugar

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

<form ... onkeydown="return event.key != 'Enter';">

O con jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Esto hará que cada pulsación de tecla dentro del formulario se verifique en el key. Si no es así Enter, volverá truey todo continuará como de costumbre. Si es Enterasí, volverá falsey todo se detendrá de inmediato, por lo que no se enviará el formulario.

Se keydownprefiere el evento keyupya que keyupes demasiado tarde para bloquear el envío del formulario. Históricamente también hubo el keypress, pero esto está en desuso, como es el KeyboardEvent.keyCode. En su KeyboardEvent.keylugar, debe usar lo que devuelve el nombre de la tecla que se está presionando. Cuando Enterestá marcado, entonces esto marcaría 13 (entrada normal) y 108 (entrada del teclado numérico).

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

Permitir la tecla Intro solo en áreas de texto

Si tiene un <textarea>en su formulario (que por supuesto debería aceptar la tecla Intro), entonces agregue el controlador keydown a cada elemento de entrada individual que no sea un <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Para reducir el repetitivo, es mejor hacerlo con jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

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

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

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

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

$(document).on("keydown", ":input:not(textarea):not(: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.

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

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

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas presionando la tecla "enter" mientras un campo de texto está enfocado, envía implícitamente el formulario), y luego lo hace 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ético 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á desactivado).

Por lo tanto, una forma que cumple 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 del 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.

Tuve que atrapar los tres eventos relacionados con presionar 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 realizar el envío real, puede agregar la línea "return false" al controlador de envío de esta manera:

<form onsubmit="return false;">

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

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

En lugar de evitar que los usuarios presionen Enter, lo que puede parecer poco natural, puede dejar el formulario 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 dice lo que necesita ser terminado 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 Enterapretar el botón, pero seguramente proporcionará una experiencia de usuario más rica.

Una pequeña y agradable solución 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 dejaba de enviar en el teclado numérico enter. 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) {...}

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

Un enfoque completamente diferente:

1. El primero <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 regresar false , lo que anula el proceso de envío.
4. Todavía puede tener otro <button type=submit>para enviar el formulario. Simplemente regrese truea la presentación en cascada.
5. Al presionar Entermientras el botón de envío real está enfocado, se activará el botón de envío real.
6. Al presionar Enterdentro <textarea>u otros controles de forma se comportará de manera normal.
7. Al presionar Enterdentro de los <input>controles de formulario, se activará el primero <button type=submit>, que regresa falsey, 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>

Dando al formulario 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>

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

Más bien usa esto

<input type="button">

que usar esto

<input type="submit">

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.

Necesitaba evitar que solo se enviaran entradas específicas, por lo que utilicé un selector de clase, 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 buenas respuestas aquí, la Enterclave parece funcionar keydownen todos los navegadores. Para la alternativa, actualicé bind()el on()método.

Soy un gran admirador 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.

Puede hacer un método de JavaScript para verificar si se Enterpresionó la tecla y, si es así, 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 de envío.

SÓLO ENVIAR BLOQUEO, pero no otra funcionalidad importante de la tecla Intro, como la creación de un nuevo párrafo en un <textarea>:

window.addEventListener('keydown', function(event) {
  //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) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Esta es la manera perfecta, no será redirigido desde su página

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Tuve un problema similar, donde tenía 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é, ingrese 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 poneronclick="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 onpresspress del formulario para Enter para llamar a su envío como se esperaba:

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

El onkeypress JS podría ser lo que necesite hacer. No hay necesidad de un cambio global más grande. Esto es especialmente cierto si usted no es el que codifica la aplicación desde cero, y ha sido reparado el sitio web de otra persona sin desarmarlo y volver a probarlo.

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

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

La desactivación Enterpara el envío del formulario aún debe permitir lo siguiente:

1. Envío de formulario a través del Enterbotón Enviar está enfocado.
2. Envío de formulario cuando se rellenan todos los campos.
3. Interacción con botones no enviados 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;
  }
});

Algo que no he visto respondió aquí: cuando pasas por los elementos de la página, presionar Entercuando llegas al botón de envío activará el controlador de envío en el formulario, pero registrará el evento como un evento de mouse. 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 de trabajo: https://jsfiddle.net/nemesarial/6rhogva2/

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 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 específicamente útil para las personas que trabajan con IE8.

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

Me gustaría agregar un pequeño 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 les guste el buen truco en la cláusula de a menos.)

Usando Javascript (sin marcar ningún campo de entrada):

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

Si alguien quiere aplicar esto en campos específicos, por ejemplo, ingrese texto de tipo:

<script>
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 funciona bien en mi caso.

Vaya a su CSS y agréguelo, luego bloqueará automáticamente el envío de su formulario siempre que haya enviado una entrada si ya no la desea, puede eliminarla o escribir activatey, en su deactivatelugar

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

También puede usar javascript:void(0)para evitar el envío de formularios.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

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

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>