表单内按钮元素的单击和输入事件的奇怪行为

Question

Consider a login.html file such as the following:考虑一个 login.html 文件，如下所示：

<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>

I have noticed a bit of a strange behavior with the button:我注意到按钮有一些奇怪的行为：

When I am inside the password field and hit 'Enter', a button-click event is triggered, just as if I was actually clicking on the button.当我在密码字段内并按“Enter”时，会触发一个按钮单击事件，就像我实际上是在单击按钮一样。 Unfortunately and confusingly this does not seem to be the case every time.不幸且令人困惑的是，这似乎并非每次都如此。 The difference to actually clicking on the button is that the focus is not taken from the password field.实际单击按钮的不同之处在于焦点不是来自密码字段。 Since I have a blur-event-listener attached to my password field, I would like the event of hitting 'Enter' to behave just as if I actually clicked on the button.由于我的密码字段附加了一个模糊事件侦听器，因此我希望点击“Enter”的事件就像我实际点击了按钮一样。

My question is: How can I make sure that hitting 'Enter' from within the password- or username field always triggers a click event of my button and shifts the focus from the input field to the button?我的问题是：如何确保从密码或用户名字段中点击“Enter”总是会触发我的按钮的单击事件并将焦点从输入字段转移到按钮？

Excerpt from my JavaScript:摘自我的 JavaScript：

document.addEventListener("DOMContentLoaded", () => {
  const submitButton = document.querySelector(".form__button");
  const passwordInputField = document.querySelector("#password");

  submitButton.addEventListener("click", e => {
      e.preventDefault();
      console.log("click event triggered");
  });

  passwordInputField.addEventListener("blur", e => {
    console.log("password field lost focus");
  });

  passwordInputField.addEventListener("keyup", e => {
    if (e.keyCode === 13) {
      console.log("Enter hit from inside password field");
      submitButton.click();
    }
  });

As you can see, I have added the keyup listener to check if this could help me to at least trigger the click-event every time I hit enter from inside my password field.如您所见，我添加了 keyup 侦听器，以检查这是否可以帮助我在每次从密码字段中按 Enter 时至少触发点击事件。 When I did this just now, the click event was triggered twice.刚才我这样做的时候，点击事件被触发了两次。

Answer 1

 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>

表单内按钮元素的单击和输入事件的奇怪行为

问题描述

1 个解决方案

解决方案1
0 2021-11-27 11:45:19

表单内按钮元素的单击和输入事件的奇怪行为

问题描述

1 个解决方案

解决方案1 0 2021-11-27 11:45:19

解决方案1
0 2021-11-27 11:45:19