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