情況說明：
- onKeydown事件觸發條件：容器中某個元素獲取焦點時，按鍵，因此無效的原因是當前容器內并沒有元素獲取焦點，
方案一：容器中監聽快捷鍵
- 解決方案：利用全域監聽
-
window.onKeydown document.onkeydown
方案二：視窗中多個容器，監聽各自的快捷鍵
- 與“方案一”不同的是，需要真正在某個自定義容器中監聽，并且不污染全域
- 解決方案: 利用 contenteditable 屬性，讓容器可編輯
-
<!--監聽容器--> <div id="keyDown" contenteditable="true"> <!--容器中內容包裹，用于隔離父容器的contenteditable屬性對子元素造成影響--> <div id="continer" contenteditable="false"></div> </div> const keyDown = document.querySelector('#keyDown'); keyDown.onkeydown = (e) => { const ev = window.event || e // do...... }<!-- 修改邊框顏色 -->
[contenteditable]{ outline: 1px solid transparent; border: 1px solid #fff;width: 100%; } [contenteditable]:focus{ border: 1px solid #00c0ef; border-radius: 3px; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545487.html
標籤：其他