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

   

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