Strange behavior of click and enter events for a button element inside a form-CodePudding

Consider a login.html file such as the following:

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

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?

Excerpt from my 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();
    }
  });

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. When I did this just now, the click event was triggered twice, yielding the following console output:

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

CodePudding user response：

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>