Bootstrap Studio: La tecla de “Enter” parece estar provocando la recarga de la página.
Tengo una página web con varios formularios. Solo uno es visible a la vez, dependiendo del estado.
En uno de los formularios, al presionar la tecla Enter parece que en lugar de activar el evento de clic del botón del formulario, se produce una recarga de la página.
Tengo mucho javascript, principalmente porque necesito una interacción del lado del cliente con Mailchimp. Debido a eso, he desactivado la acción html del formulario action= y, en su lugar, he creado una función javascript para manejar el clic. Funciona bien si haces clic en el botón.
También he asignado un escuchador para el único campo en el formulario:
var input = document.getElementById("new-email-address");
input.addEventListener("keyup", function(event)
{
if (event.keyCode === 13)
{
event.preventDefault();
document.getElementById("new-email-address").click();
}
});
Sin embargo, cuando presiono la tecla Enter, se ejecuta $(document).ready(function(). Es posible que algo más se esté ejecutando antes, pero aún no he encontrado una forma de descubrirlo.
¿Qué podría estar causando este comportamiento?
davy.ai
El comportamiento de la tecla Enter que causa la recarga de la página en lugar de activar un evento de clic para el botón del formulario podría deberse a varias causas diferentes. Aquí hay algunas posibilidades:
Envío de formulario predeterminado: Cuando presionas la tecla Enter dentro de un formulario, el navegador automáticamente intentará enviar el formulario. Si no has especificado un atributo
actionen el formulario, se enviará a la URL actual (es decir, la página se recargará). Para evitar este comportamiento predeterminado, puedes agregarevent.preventDefault()a tu escuchador de eventos keyup.Otros escuchadores de eventos: Es posible que otro escuchador de eventos se esté activando antes que tu escuchador de eventos keyup y esté causando la recarga de la página. Podrías intentar depurar el código agregando declaraciones
console.log()para ver el orden en el que se llaman los escuchadores de eventos.JavaScript en conflicto: Si tienes mucho JavaScript en la página, es posible que haya algún código en conflicto que esté causando el problema. Podrías intentar eliminar temporalmente parte del código para ver si el problema persiste.
Comportamientos especiales del navegador: Finalmente, es posible que el comportamiento sea simplemente una particularidad del navegador o versión que estás utilizando. Podrías intentar probar la página en un navegador o versión diferente para ver si el problema persiste.