【浏览器兼容】获取按键值

你常常需要做的两件事：监听用户按下了哪一个键和当前事件的对象，IE和FireFox的实现是不同的。下面是常见的一种写法：

function listenEventAndCode(e){

var code=null;

if(!e)

  e=window.event;

if(e.keyCode)

  code=e.keyCode;

else if(e.which)

code=e.which;

//do something here;

} 

下面是调用示例：

<div onkeypress="listenEventAndCode(event);">this is onkeypress!</div>

写到上面之后以为自己对基本的keycode基本了解了，但是实际测试却让人十分郁闷！

下面这一段代码IE8会相应，而FireFox无响应,十分不解。

脚本代码：

function divTest(e){

if(!e)e=window.event;

alert(e.which+"/"+e.keyCode+"/"+e.charCode);

}

页面很简单：

<div onkeydown="divTest(event);" style="height:500px">

keydown test

</div>

<input onkeydown="divTest(event);" type="text" />

之后就是页面加载后，首先点击div，按下Enter触发事件。IE8提示：undefined/13/undefined,而FF居然毫无反应。

但是在文本框中FF则反应良好，弹出13/13/0。IE8也是undefined/13/undefined。

利用FireBug调试发现FireFox完全没有执行脚本代码，不管这个div是否拥有焦点。

但是我们做下改动之后你又会发现一些问题：

在div里面加入一个input ，如下：

 <div onkeydown="divTest(event);" style="height:500px">

keydown test

<br/>

<input onkeydown="divTest(event);" type="text" /> 

</div>

<input onkeydown="divTest(event);" type="text" />

 由于没有取消事件冒泡，在div里面的input按下Enter应该会触发2次divTest事件。测试结果IE和FF都如预期一样正常。

另外，关于keyCode和charCode可以参考：

http://www.cnblogs.com/beiyu/archive/2010/02/09/keys_detected.html 

不过仍然没有解决div按下enter未响应的问题。 

 最终解决方案：

给div加一个tabindex值， 那么div就可以聚焦（周边包含虚线框），于是就可以响应onkeydown事件了。

对于如何让元素获得焦点，请参考：

http://www.cnblogs.com/rubylouvre/archive/2010/05/03/1726334.html