今天去修改一个老系统的时候,解决了一个按钮触发在不同浏览器上兼容的问题。就顺手差了一些资料,不要知其然不知其所以然。
先介绍几个简单的
KeyDown事件:
当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数
function keyDown(){}
document.onkeydown = keyDown;
IE下读取键盘按键
keycode = event.keyCode;//
String.fromCharCode(event.keyCode)//索引转换。
FF下读取键盘按键
keycode = e.which;
String.fromCharCode(e.which);// 索引转换。
so可以看到不同浏览器下对键盘按钮的读取的方式不同,
ie是enent.keyCode,而FF是event.which.
------------------------------------------------------------------------华丽的分割线------------------------------------------------------------------------------------------------------------------
这里.我的问题已经解决,判断一下浏览器就再执行不同的方法就可以了。
一般青年解决方案
通过navigator的appName判断.
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alert("按键码: " + keycode + " 字符: " + realkey);
}
document.onkeyup = keyUp;
文艺青年解决方案
function keyUp(e) {
var currKey = 0, e = e || event;
currKey = e.keyCode || e.which || e.charCode;
var keyName = String.fromCharCode(currKey);
alert("按键码: " + currKey + " 字符: " + keyName);
}
document.οnkeyup= keyUp;
解释一下
e=e||event
js中这句代码的意思是,如果在FireFox或Opera中,隐藏的变量e是存在的,那么e||event返回e,如果在IE中,隐藏变量e是不存在,则返回event。
currKey=e.keyCode||e.which||e.charCode;
这句是为了兼容浏览器按键事件对象的按键码属性(详见第三部分), 如IE中,只有keyCode属性,而FireFox中有which和charCode属性,Opera中有keyCode和which属性等。
-----------------------------------------------------------------我又来分割了----------------------------------------------------------------------
问题已经解决,很基础的问题,我顺手用jquery试了一下
网上找了一段代码是这样的。
这是ie中的效果
这是火狐中的效果。
可以看到Jquery是可以解决这个兼容问题的。
我留意了上面的关键字:
event.keyCode
我换了一下 ,换成which,一样是可以的。
所以大概可以得出结论,Jquery已经解决了这个问题。
为了刨根问题,打开了Jquery的API文档,查询了资料出现了这样一句话
大概的意思是~在1.1.3版本.就加入了event.which这个属性。用来规范keycode和charcode.
顺便在jquery找到了源代码。很简单的一个逻辑。
---------------------------------------------------------------分割--------------------------------------------------------------------------------------------
饭后写了这篇小文,虽然是很基础的东西,不过也算是留下一个记号。
解决了问题,记录下解决的过程,以及方法,对以后的路都是有帮助的。