div容器的keydown按键事件

钓鱼老翁

情况说明：

• onKeydown事件触发条件：容器中某个元素获取焦点时，按键。因此无效的原因是当前容器内并没有元素获取焦点。
  

方案一：容器中监听快捷键

• 解决方案：利用全局监听
  
• 1. window.onKeydown
  2. document.onkeydown

  复制代码
  　　　　
  

方案二：窗口中多个容器，监听各自的快捷键

• 与“方案一”不同的是，需要真正在某个自定义容器中监听，并且不污染全局
  
• 解决方案: 利用 contenteditable 属性，让容器可编辑
  
• 1.    
  2.    
  5. const keyDown = document.querySelector('#keyDown');
  6. keyDown.onkeydown = (e) => {
  7.     const ev = window.event || e
  8.     // do......
  9. }<br><br>

  复制代码
  1. [/code][code][contenteditable]{
  2.   outline: 1px solid transparent;
  3.   border: 1px solid #fff;width: 100%;
  4. }
  5. [contenteditable]:focus{
  6.   border: 1px solid #00c0ef;
  7.   border-radius: 3px;
  8. }

  复制代码
   
  

 

来源:https://www.cnblogs.com/SimpleTian/p/17167956.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！