1

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
1
  • Depends on the job code you add, this should not be from normal html, kindly preview your js code Nov 27, 2021 at 11:36

1 Answer 1

2

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>

6
  • Thx for your answer, Alan Omar! I have tried this solution, but it seems hitting enter from inside the password field triggers some kind of event beforehand, not a submit-event, I have checked that.
    – Luk
    Nov 27, 2021 at 11:56
  • @Luk what type of events get triggered when you hit the Enter from password field?
    – Alan Omar
    Nov 27, 2021 at 12:01
  • that's what I don't know. I have just read that the button of type submit actually always triggers the submit event of the form that it is part of. So I have added a submit-listener to the form which prevents the default event and outputs a message to the console. But the form is still submitted and I don't see any output in my console. So I don't think the submit-event is triggered.
    – Luk
    Nov 27, 2021 at 12:07
  • @Luk can you be more precise of what you are tying to achieve, my answer was based from what i understand of you question.
    – Alan Omar
    Nov 27, 2021 at 12:10
  • 1
    @Luk nice to hear that.
    – Alan Omar
    Nov 27, 2021 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.