考慮如下所示的 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>
我注意到按鈕有一些奇怪的行為：
當我進入密碼欄位并按“Enter”鍵時，會觸發按鈕單擊事件，就好像我實際上是在單擊按鈕一樣。不幸且令人困惑的是，情況似乎并非每次都如此。實際單擊按鈕的不同之處在于焦點不是從密碼欄位中獲取的。因為我的密碼欄位附加了一個模糊事件偵聽器，所以我希望點擊“Enter”的事件就像我真的點擊了按鈕一樣。
我的問題是：如何確保在密碼或用戶名欄位中點擊“Enter”總是會觸發我的按鈕的點擊事件并將焦點從輸入欄位轉移到按鈕？
摘自我的 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();
}
});
如您所見，我添加了 keyup 偵聽器來檢查這是否可以幫助我至少在每次我從密碼欄位中按 Enter 鍵時觸發點擊事件。當我剛剛這樣做時，點擊事件被觸發兩次，產生以下控制臺輸出：
inside submitButton click event handler
keyup event triggered from inside passwordInputField
passwordInputField lost focus
inside submitButton click event handler
uj5u.com熱心網友回復：
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 submittionbutton: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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/367574.html
標籤：javascript html css
上一篇：如何使用forEach一個接一個地執行2個函式，而不回圈兩次？
下一篇：如何將行內塊居中