div容器的keydown按键事件

情况说明:

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

     

 

热门相关:超武穿梭   寂静王冠   刺客之王   网游之逆天飞扬   仗剑高歌