> Faqs > Evitar submitir un formulario al pulsar la tecla enter

Evitar submitir un formulario al pulsar la tecla enter

Estoy haciendo un formulario que necesito que no se submita al pulsar la tecla enter.

Lo que me pasa es que hago el formulario y tiene varios campos de texto. Entonces, al pulsar el la tecla return (también llamada tecla enter), lo que ocurre es que el formulario se envía.

Yo no quiero que el formulario se envíe al pulsar enter ¿esto se puede conseguir? Porque quiero que el formulario se submita sólo al pulsar el botón de submitir.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Aquí te dejo una solución óptima para tratar este caso. Simplemente se trata de detectar las teclas que el usuario pulsa mientras está en el campo de texto y si pulsa enter, simplemente no hacer nada, haciendo que el evento se prevenga, usando el método preventDefault() sobre el objeto evento.

Te paso un ejemplo completo con el formulario y el script para evitar que el formulario se envie (evitar submitir) cuando se pulsa enter sobre cualquier campo de texto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Prevenir enviar el formulario al pulsar enter en los campos de texto</title>
</head>
<body>
  <h1>Prevenir enviar el formulario al pulsar enter en los campos de texto</h1>
  <form action="#">
    Nombre: <input type="text" name="nombre">
    <br>
    Apellidos: <input type="text" name="apellidos">
    <br>
    <input type="submit" value="Enviar">
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('input[type=text]').forEach( node => node.addEventListener('keypress', e => {
        if(e.key === "Enter" || e.keyCode === 13) {
          e.preventDefault();
        }
      }))
    });
  </script>
</body>
</html>

Nota: Acabo de actualizar la solución para recoger la manera moderna de detectar la tecla Enter en Javascript.

Detectar tecla enter en navegadores modernos:

Se utiliza la propiedad e.key, es decir, la propiedad "key" del objeto enter. Detectamos el enter viendo si esa propiedad vale "Enter"

e.key === "Enter"

Detectar enter en navegadores antiguos

Anteriormente en navegadores se usaba e.keyCode para recibir el código de la tecla que se había pulsado. Este método ya no se necesitaría usar, pero por compatibilidad hacia atrás se podría colocar y no causaría problema ninguno.

e.keyCode === 13
Miguel Angel
1791 84 107 5
Excelente solución! gracias!