Блог

Рассмотрим login.html файл, такой как следующий:

 lt;bodygt; lt;div class="container"gt;  lt;form class="form"gt;  lt;h1gt;Loginlt;/h1gt;  lt;input type="text" class="form__input" name="username" autofocus placeholder="Username" /gt;  lt;input type="password" class="form__input" name="password" placeholder="Password" /gt;  lt;button class="form__button" type="submit"gt;Loginlt;/buttongt;  lt;/formgt; lt;/divgt; lt;/bodygt;  

Я заметил немного странное поведение с кнопкой:

Когда я нахожусь в поле пароля и нажимаю «Ввод», запускается событие нажатия кнопки, как если бы я на самом деле нажимал на кнопку. К сожалению, и это сбивает с толку, кажется, что это происходит не каждый раз. Разница с фактическим нажатием на кнопку заключается в том, что фокус не берется из поля пароля. Поскольку у меня есть прослушиватель событий размытия, прикрепленный к моему полю пароля, я хотел бы, чтобы событие нажатия «Enter» вело себя так же, как если бы я действительно нажал на кнопку.

Мой вопрос: Как я могу убедиться, что нажатие кнопки «Ввод» в поле пароля или имени пользователя всегда вызывает событие нажатия моей кнопки и смещает фокус с поля ввода на кнопку?

Выдержка из моего JavaScript:

 document.addEventListener("DOMContentLoaded", () =gt; {  const submitButton = document.querySelector(".form__button");  const passwordInputField = document.querySelector("#password");   submitButton.addEventListener("click", e =gt; {  e.preventDefault();  console.log("inside submitButton click event handler");  });   passwordInputField.addEventListener("blur", e =gt; {  console.log("passwordInputField lost focus");  });   passwordInputField.addEventListener("keyup", e =gt; {  if (e.keyCode === 13) {  console.log("keyup event triggered from inside passwordInputField");  submitButton.focus();  submitButton.click();  }  });  

Как вы можете видеть, я добавил прослушиватель ключей, чтобы проверить, может ли это помочь мне, по крайней мере, запускать событие щелчка каждый раз, когда я нажимаю «Ввод» в поле пароля. Когда я только что сделал это, событие щелчка было вызвано дважды, что привело к следующему выводу консоли:

 inside submitButton click event handler keyup event triggered from inside passwordInputField passwordInputField lost focus inside submitButton click event handler