Considere un archivo login.html como el siguiente:
<body> <div class="container"> <form class="form"> <h1>Login</h1> <input type="text" class="form__input" name="username" autofocus placeholder="Username" /> <input type="password" class="form__input" name="password" placeholder="Password" /> <button class="form__button" type="submit">Login</button> </form> </div> </body>He notado un comportamiento un poco extraño con el botón:
Cuando estoy dentro del campo de contraseña y presiono 'Enter', se activa un evento de clic de botón, como si realmente estuviera haciendo clic en el botón. Desafortunadamente y de manera confusa, este no parece ser el caso siempre. La diferencia con hacer clic en el botón es que el foco no se toma del campo de contraseña. Dado que tengo un detector de eventos borrosos adjunto a mi campo de contraseña, me gustaría que el evento de presionar 'Enter' se comporte como si realmente hubiera hecho clic en el botón.
Mi pregunta es: ¿Cómo puedo asegurarme de que presionar 'Entrar' desde el campo de contraseña o nombre de usuario siempre activa un evento de clic de mi botón y cambia el enfoque del campo de entrada al botón?
Extracto de mi JavaScript:
document.addEventListener("DOMContentLoaded", () => { const submitButton = document.querySelector(".form__button"); const passwordInputField = document.querySelector("#password"); submitButton.addEventListener("click", e => { e.preventDefault(); console.log("inside submitButton click event handler"); }); passwordInputField.addEventListener("blur", e => { console.log("passwordInputField lost focus"); }); passwordInputField.addEventListener("keyup", e => { if (e.keyCode === 13) { console.log("keyup event triggered from inside passwordInputField"); submitButton.focus(); submitButton.click(); } });Como puede ver, agregué el oyente keyup para verificar si esto podría ayudarme a al menos activar el evento de clic cada vez que presiono enter desde el interior de mi campo de contraseña. Cuando hice esto hace un momento, el evento de clic se activó dos veces, lo que produjo la siguiente salida de la consola:
inside submitButton click event handler keyup event triggered from inside passwordInputField passwordInputField lost focus inside submitButton click event handler let form_element = document.querySelector('#form') form.addEventListener('submit',(e) => { e.preventDefault(); let button_element = document.querySelector('#button') button_element.focus() }) // now here you have to add click handler to the button for form submittion button:focus{ background-color:green; } <form class="form" id="form"> <h1>Login</h1> <input type="text" class="form__input" name="username" autofocus placeholder="Username" /> <input type="password" class="form__input" name="password" placeholder="Password" /> <button id="button" class="form__button" type="submit">Login</button> </form>