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

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.keyCode == 13) {
          e.preventDefault();
        }
      }))
    });
  </script>
</body>
</html>
Miguel Angel
3090 138 206 17