javascript

Prevenir envío de formulario con Enter

En este post sobre formularios HTML y JavaScript vamos a ver cómo prevenir que el form sea enviado al presionar la tecla Enter; para ello se usará JavaScript o un simple atributo HTML.

Prevenir envío de formulario

Lo que tenemos que hacer es escuchar el evento keydown del input en cuestión, y detectar si se presionó la tecla Enter. En caso de que sí, prevenimos el comportamiento con preventDefault.

Para obtener una referencia al elemento puedes utilizar getElementById, querySelector, etcétera. Yo usaré querySelector y queda así:

const $nombre = document.querySelector("#nombre");

// Escuchamos el keydown y prevenimos el evento
$nombre.addEventListener("keydown", (evento) => {
 if (evento.key == "Enter") {
  // Prevenir
  evento.preventDefault();
  return false;
 }
});

En este caso estamos previniendo que se envíe cuando se presiona enter en el input que tiene el id nombre. Podemos ver el HTML así:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Prevenir enter</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <form action="." method="get">
   <input id="nombre" name="nombre" type="text" placeholder="Nombre">
   <br><br>
   <button type="submit">Enviar</button>
  </form>
    <script src="script.js"></script>
  </body>
</html>

Verás que si presionas Enter, el formulario no se envía, y que solo lo hace cuando presionas el botón destinado al envío.

Varios input

Igualmente podrías desactivar este comportamiento para todos los input.

Para ello recomiendo colocarles determinada clase (de igual forma podría hacerse global a los input, pero en ocasiones es mejor hacerlo por separado) y luego obtener los elementos con querySelectorAll.

Comenzamos definiendo nuestro formulario:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Prevenir Enter</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <form action="." method="get">
   <input class="prevenir-envio" name="nombre" type="text" placeholder="Nombre">
   <br><br>
   <input class="prevenir-envio" name="correo" type="email" placeholder="Correo electrónico">
   <br><br>
   <button type="submit">Enviar</button>
  </form>
    <script src="script.js"></script>
  </body>
</html>

Fíjate en que nuestros campos del formulario tienen la clase prevenir-envio; ahora obtenemos una referencia a todos esos elementos y por cada uno le agregamos el listener:

const $elementos = document.querySelectorAll(".prevenir-envio");

$elementos.forEach(elemento => {
 elemento.addEventListener("keydown", (evento) => {
  if (evento.key == "Enter") {
   // Prevenir
   evento.preventDefault();
   return false;
  }
 });
});

Lo que hacemos es usar forEach en combinación de las arrow functions para agregar el listener a cada input. Es decir, hacemos para todos lo que hicimos en el ejemplo del input individual.

Desactivar envío con Enter en formulario completo

Este truco solo funciona en caso de que tu formulario no tenga ningún textarea (pues si los tiene, no se podrá colocar una nueva línea). Simplemente indicamos que si la tecla es Enter no se haga nada agregando el atributo onkeydown:

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

En este caso ya no necesitamos JavaScript, pues lo estamos indicando desde el HTML. De igual modo dejo el código completo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Prevenir Enter</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <form onkeydown="return event.key != 'Enter';" action="." method="get">
   <input name="nombre" type="text" placeholder="Nombre">
   <br><br>
   <input name="correo" type="email" placeholder="Correo electrónico">
   <br><br>
   <button type="submit">Enviar</button>
  </form>
    <script src="script.js"></script>
  </body>
</html>

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/