div容器的keydown按键事件

  • div容器的keydown按键事件已关闭评论
  • 100 次浏览
  • A+
所属分类:Web前端
摘要

情况说明:方案一:容器中监听快捷键    方案二:窗口中多个容器,监听各自的快捷键

情况说明:

  • 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; }