解决onkeydown与onkeyup在火狐与谷歌不兼容问题-自学php网

解决onkeydown与onkeyup在火狐与谷歌不兼容问题

来源：自学PHP网时间：2014-09-19 14:48 作者：阅读:次

[导读] 本文章来给各位同学介绍关于onkeydown与onkeyup在火狐与谷歌不兼容问题解决办法，希望此教程对各位同学会有所帮助。...

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

如果要在DIV里捕获这些onkeydown与onkeyup事件则是有浏览器兼容的，如果你直接在节点上绑定属性如：

代码如下	复制代码
<div onkeydown="alert("keydown");" style="width:200px; height:300px;"></div>

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

第一种，在div上添加contenteditable="true"

代码如下	复制代码
<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>

FireFox:

Chrome

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

第二种在div上添加tabindex属性

代码如下	复制代码
<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>

FireFox:

Chrome

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

关于有朋友反问过我在DIV上捕获键盘输入事件有什么用？我想这个问题太高深莫测了，可能对于有些项目没用，但对于某些特殊的网页应用是必不可少的！

简单的Javascript倒计时代码

js中添加事件三种方法小结

子栏目

解决onkeydown与onkeyup在火狐与谷歌不兼容问题

最新评论

添加评论

更多文章推荐

添加评论