解决onkeydown与onkeyup在火狐与谷歌不兼容问题
本文章来给各位同学介绍关于onkeydown与onkeyup在火狐与谷歌不兼容问题解决办法，希望此教程对各位同学会有所帮助。正常情况下，我们通常都是在input内捕获onkeydown或者onkeyup事件做一些常用的处理，比如限制输入某一类型的字符，或者限制输入长度等等。如果要在DIV里捕获这些onkeydown与onkeyup事件则是有浏览器兼容的，如果你直接在节点上绑定属性如： 代码如下
&div onkeydown=&alert(&keydown&);& style=&width:200 height:300&&&/div&
那么在IE下是可以工作的，而在FireFox、Chrome下则无法工作。当然，有解决方法，两种：第一种，在div上添加contenteditable=&true& 代码如下
&meta charset=&UTF-8& /& &style type=&text/css&&
border:1px solid #000;
height:100
} &/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&&
border:1px solid #000;
height:100
} &/style& &div tabindex=&0& onkeydown=&console.log(event.keyCode);&&&/div&
FireFox:Chrometabindex的值是多少都可以，只要有这个属性存在，tabindex的实际作用是用户按tab键时焦点顺序切换的索引设置，结果居然可以解决这个兼容性问题，并且不会影响它本身的功能使用，当你给DIV加上tabindex=0以后，你进入网页按下tab键第一个焦点依然先索引到被加了tabindex=0的DIV。关于有朋友反问过我在DIV上捕获键盘输入事件有什么用？我想这个问题太高深莫测了，可能对于有些项目没用，但对于某些特殊的网页应用是必不可少的！
更多相关文章
现在有一个div,里面放置了一个文本域textarea标签,并且设置了div的padding:0,但是现在测试的情况是ie下一切正常,但是火狐下,文本域和div的底部有2px的间隙,而在谷歌浏览器下更有5px的间隙,不知道怎么做兼容. 下面是图示: 解决方案,在div中设置:1,font-size: ...
javascript中showModalDialog()方法在IE,火狐,百度,360等浏览器可以使用,但是在谷歌浏览器下去没有任何反应,现在我给大家一种方法,当然这个方法是我在网上找的,调试可以使用. &script type=&text/javascript&quot ...
function huiche1() { if (event.keyCode == 13) { alert(&捕捉住回车提交事件!&); } } &div id=&yonghu2&& &input id=&name& va ...
png图片在火狐,谷歌等浏览器下是透明的,无论是单独图片还是作为背景.甚至在ie7,8都是好的,唯独ie6不能让它直接透明,现在有2个网页特效的方法解决它--&&!doctype html public &-//w3c//dtd xhtml 1.0 transitional// ...
phpcms内容页评论有个bug,当发布评论之后,跳转到&完整评论列表&的页面,而不是回到当前评论框的页面.后来phpcms的一次升级修复了这个bug.这种小问题却非常让人头疼,让我们来分析一下这个bug是怎么产生的?phpcms是通过iframe一个评论页面到内容页实现评论功能 ...
HTML: &div class=&test&&&img src=&body2.jpg& alt=&&&&/div& CSS: *{margin: 0;padding: 0;} .test img{hei ...
最近项目组因为业务需要,都在使用 Microsoft SQL 2000 的 Analysis Services,但是不知道怎么回事,过了几天,大家的Analysis Manager上都出现了乱码,虽然不影响使用,但是看的人好不爽,: 这两天晚上一直在找解决办法,结果发现百度.谷歌上竟然都没有解决办法 ...
升级windows10之后经常会有朋友反应出各种问题了,我们今天一起来看看关于win10系统10547预览版蓝屏重启问题分析与解决办法.原因分析win10系统10547预览版蓝屏重启原因是win10的杀毒软件导致了,这个就是Windows Defender更新及开机底层扫描时出现蓝屏重启问题了,知道 ...
今天在使用SSH上传文件时有一些文件可以上传,但有些上传不了,错误提示:encountered 1 errors during the transfer了,下面我来给大家分享解决方法.用SSH 上传文件的时候,出现
/******************************************** ...
MyFaces Core v2.2.3 发布了,MyFaces是 JSF (JavaSer ...
在Oracle Linux Server Release 5.7上安装64位Oracle
问题:我想要检查一下我用brctl工具创建的Linux网桥的MAC地址学习状态.请问,我要 ...
VirtualBox 4.3.6 发布,此版本是一个维护版本,里面包括了 Ubuntu 安 ...
Canonical 最近推出两款新的 Ubuntu Touch images,将 Ubun ...
在linux上安装完成Oracle 10g以后,我们常常会用到isqlplus来执行SQL ...
Python实践--datetime日期操作脚本,最近需要做一些日期的操作,写了一个脚本. ...
昨晚,为一个客户的数据库做了一次临时性的备份留存,数据库的整体容量大约在1.5T左右,一般 ...开发中经常会碰到需要动态监听输入框值变化的情况，如果使用&onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合
标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。
您可能感兴趣的相关文章
　　oninput 是
的标准事件，对于检测&textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。 事件在主流浏览器的兼容情况如下：
　　从上面表格可以看出， 事件在 IE9 以下版本不支持，需要使用 IE 特有的&onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
　　在监听到
事件后，可以使用 event 的&propertyName 属性来获取发生变化的属性名称。
　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：
&script type="text/javascript"&
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
Please modify the contents of the text field.
&input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" /&
库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码如下：
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
　　下面是
在线演示，如果不能显示请刷新一下页面或者点击后面的链接（）：&
　　最后需要注意的是： 和
这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过&oninput & onpropertychange 仍然是监听输入框值变化的最佳方案，如果大家有更好的方法，欢迎参与讨论。
　　参考资料：
您可能感兴趣的相关文章
本文链接：
编译来源：
阅读(...) 评论()}