jQuery – Evitar envío formulario con tecla Enter

Sequimos con ejemplos de jQuery. En este caso cómo evitar el envío de formulario con la tecla Enter. Como ya vimos en otros artículos, la forma de trabajar puede llevar a errores en el envío de formulario.

Muchos usuarios, tienen la manía que mientras van rellenando el formulario, una vez ha rellenado uno de los campos, pulsa la tecla Enter. Sí, los hay. Lógicamente, al pulsar Intro, se envía el formulario con la posibilidad de que muchos campos opcionales no se hayan rellenado.

Vamos a ver el código que captura el evento de pulsar la tecla cuando estamos dentro de los campos del formulario, y cómo se evita con jQuery que el formulario se envíe si la tecla es el Enter o Intro.

See the Pen jQuery – Evitar envio formulario con tecla Enter by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

La parte que trabaja la captura del evento es:

// Si pulsamos tecla en un Input
 $("input").keydown(function (e){
   // Capturamos qué telca ha sido
   var keyCode= e.which;
   // Si la tecla es el Intro/Enter
   if (keyCode == 13){
     // Evitamos que se ejecute eventos
     event.preventDefault();
     // Devolvemos falso
     return false;
   }
 });

Está comentado los pasos que se realizan. De esta manera evitamos que los formularios se envíen pulsando la tecla Intro.

Es otro ejemplo de cómo trabajar para evitar posibles problemas. Sobretodo las personas mayores tienen una forma de trabajar que nos puede sorprender. Es muy normal que cada vez que rellenen un campo del formulario, intenten decir que ya lo han rellenado, y cuando deberían pular el tabulador o directamente utilizar el ratón, utilizan el Intro que es lo que le han enseñado para indicar que han acabado.

Este ejemplo también podéis utilizarlo para capturar el teclado y deshabilitar según que teclas.

En temas de formularios y jquery, os puede interesar este otro artículo:

Más artículos sobre jquery y formularios:

Evitar doble click en botón con jquery

Espero que os sea de utilidad.

Información relacionada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*