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