前端杂症--div等容器keydown事件无效(包括vue的@keydown)
问题原因onKeydown事件触发条件:容器中某个元素获取焦点时,按键。场景1:应用中监听快捷键解决方案://window.onKeydowndocument.onkeydown场景2(重点):窗口中多个应用,监听各自的快捷键...
·
先说问题原因
onKeydown事件触发条件:容器中某个元素获取焦点时,按键。因此无效的原因是当前容器内并没有元素获取焦点。
场景1:应用中监听快捷键
- 解决方案:利用全局监听
//
window.onKeydown
document.onkeydown
场景2:窗口中多个应用,监听各自的快捷键。(重点)
与“场景一”不同的是,需要真正在某个自定义容器中监听,并且不污染全局
- 解决方案: 利用contenteditable属性,让容器可编辑。(需要注意可编辑带来的影响,代码中会说明)
<!--监听容器-->
<div id="evnetContiner" contenteditable="true">
<!--容器中内容包裹,用于隔离父容器的contenteditable属性对子元素造成影响-->
<div id="continer" contenteditable="false"></div>
</div>
const EventContiner = document.querySelector('#evnetContiner');
EventContiner.addEventListener('keydown', (e) => {
// do ...
// 防止输入内容,影响布局。实测子元素input、textArea不会影响
e.preventDefault();
});
注意:
-
- contenteditable会影响子元素,使子元素也变成可编辑,需要中间层隔离。
-
- 键盘行为要取消掉(preventDefault),不然会输入内容。
-
- 目前谷歌可用,方案仅做参考,兼容性未测试,待测试后补充兼容说明。
更多推荐
已为社区贡献1条内容
所有评论(0)