使用 Angular，我有各種 HostListeners 監聽 keydown：
@HostListener('window:keydown', ['$event'])
keyEvent(evt: KeyboardEvent) {
console.log(evt)
}
我可以在控制臺日志中看到它正在觸發。但它不會觸發，直到我以某種方式與頁面互動（例如通過首先單擊它），然后它作業得很好。
這是預期的行為嗎？如果沒有，我該如何解決它，以便在用戶首先與頁面互動的情況下熱鍵作業？
注意：在https://duckduckgo.com上，箭頭鍵似乎可以在不與頁面互動的情況下作業 - 也許這只是與 TabIndex 有關？
注意：Chrome 中存在這個問題。我沒有在其他瀏覽器中測驗過。
uj5u.com熱心網友回復：
這可能是因為他們有一個元素（輸入）自動聚焦。在您的應用程式上呼叫正文上的 .focus() 。
uj5u.com熱心網友回復：
在我注意到按下 Tab 鍵（選擇了一個按鈕）后熱鍵起作用后，我想出了一個瘋狂的 hacky 修復。
所以我只是在頁面上添加了一個無用的按鈕并將其隱藏在螢屏之外并將焦點設定在它上面。現在熱鍵在頁面加載時起作用。
代碼如下：
TS：
@ViewChild('setFocusOnMeToMakeHotkeysWorkOnPageLoad') setFocusOnMeToMakeHotkeysWorkOnPageLoad: ElementRef<HTMLButtonElement>
ngAfterViewInit() {
setTimeout(() => {
this.setFocusOnMeToMakeHotkeysWorkOnPageLoad.nativeElement.focus()
})
}
HTML：
<button #setFocusOnMeToMakeHotkeysWorkOnPageLoad id="set-focus-on-me-to-make-hotkeys-work-on-page-load"></button>
CSS：
#set-focus-on-me-to-make-hotkeys-work-on-page-load {
position: absolute;
opacity: 0;
pointer-events: none;
top: -1000px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504915.html
上一篇：每當我在頁面中查找某個元素時，即使它存在，它仍然會顯示為不存在
下一篇：序列號框不再自動填充