Cómo evitar que el Enter en un input envíe un formulario con JavaScript

Si alguna vez te has encontrado llenando un formulario y accidentalmente has presionado la tecla Enter, has experimentado la frustración de enviar el formulario antes de haber completado todos los campos. Para evitar que esto suceda, puedes utilizar JavaScript para controlar el comportamiento del Enter en un campo de formulario. En este artículo, aprenderás cómo hacerlo.

Antes de empezar, asegúrate de tener un conocimiento básico de HTML y JavaScript.

Ejemplo de formulario

Aquí te dejamos un ejemplo de un formulario simple que incluye dos campos de entrada y un botón de envío. Si presionas la tecla Enter mientras estás escribiendo en cualquiera de los campos de entrada, el formulario se enviará automáticamente.

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre"><br><br>
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email"><br><br>
  
  <button type="submit">Enviar</button>
</form>

Cómo evitar que el Enter envíe el formulario

Para evitar que el formulario se envíe automáticamente cuando se presiona Enter, puedes utilizar el siguiente código JavaScript:

document.addEventListener("DOMContentLoaded", () => {
  const form = document.querySelector("form");
  form.addEventListener("keydown", event => {
    if (event.key === "Enter") {
      event.preventDefault();
    }
  });
});

Este código se ejecutará cuando se cargue la página y buscará el formulario. A continuación, agregará un evento «keydown» al formulario que escuchará cualquier tecla presionada en el formulario. Si la tecla presionada es Enter, se llamará al método preventDefault() en el evento, lo que evitará que el formulario se envíe.

Con este código, el usuario todavía puede presionar el botón de envío para enviar el formulario una vez que todos los campos estén completos.

Si quieres probarlo, simplemente agrega el código a la página donde se encuentra el formulario y reemplaza el código HTML del formulario anterior.

Esperamos que este artículo te haya sido útil. Si te gustó, no dudes en compartirlo con tus amigos. ¡Gracias por leer!