div的onkeydown&onkeyup在火狐和谷歌上不能工作

正常情况下,我们通常都是在input内捕获onkeydown或者onkeyup事件做一些常用的处理,比如限制输入某一类型的字符,或者限制输入长度等等。

如果要在div里捕获这些onkeydownonkeyup事件则是有浏览器兼容的,如果你直接在节点上绑定属性如

<div onkeydown="console.log('keydown');" style="width:200px; height:300px;"></div>

那么在IE下是可以工作的,而在FireFox、Chrome下则无法工作。当然,有解决方法,两种:

第一种

在div上添加contenteditable="true",FireFox和Chrome正常工作

<meta charset="UTF-8" />
<style type="text/css">
  div {
    border:1px solid #000;
    width:500px;
    height:100px;
  }
</style>
<div contenteditable="true" onkeydown="console.log(event.keyCode);"></div>

这种方法适合把div当做一个编辑器来使用时,这么干极其方便,或者仅只是想获取键盘输入而又不输入字符时可以在onkeydown后return false即可。或者你可以使用第二种方法。

第二种

添加taindex属性,FireFox和Chrome正常工作

<meta charset="UTF-8" />
<style type="text/css">
  div {
    border:1px solid #000;
    width:500px;
    height:100px;
  }
</style>
<div tabindex="0" onkeydown="console.log(event.keyCode);"></div>

tabindex的值是多少都可以,只要有这个属性存在,tabindex的实际作用是用户按tab键时焦点顺序切换的索引设置,结果居然可以解决这个兼容性问题,并且不会影响它本身的功能使用,当你给div加上tabindex=0以后,你进入网页按下tab键第一个焦点依然先索引到被加了tabindex=0的div。

关于有朋友反问过我在div上捕获键盘输入事件有什么用?这个通常是做一些全屏演示类的动件可能需要,比如游戏,要控制任务上下左右走动,可能对于普通网页没用,但对于某些特殊的网页应用是必不可少的!

分享

TITLE: div的onkeydown&onkeyup在火狐和谷歌上不能工作

LINK: https://www.qttc.net/385-div-onkey-down-up-not-working-on-ff-chrome.html

NOTE: 原创内容,转载请注明出自琼台博客