JavaScript onkeydown 事件详解与跨浏览器兼容处理

onkeydown 事件概述

JavaScript onkeydown 事件

当用户按下键盘上的任意按键时，浏览器会触发 onkeydown 事件。与 onkeypress 事件不同，onkeydown 能够响应所有按键的按下动作，包括功能键（如 F1-F12、方向键等），而 onkeypress 仅针对产生字符输入的按键有效。

提示

在不同浏览器中，获取被按下按键的代码存在差异：Internet Explorer 和 Chrome 等浏览器使用 event.keyCode 属性，而 Netscape、Firefox 和 Opera 等浏览器则使用 event.which 属性。

获取按键值的跨浏览器实现

onkeydown 获取用户按下的键

以下示例展示了如何使用 onkeydown 事件来捕获用户按下键盘按键的具体信息：

<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
 var keynum;
 var keychar;
keynum = window.event ? e.keyCode : e.which;
 keychar = String.fromCharCode(keynum);
 alert(keynum+':'+keychar);
}
</script>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>

如上面例子所示，event.keyCode/event.which 得到的是一个按键对应的数字值（Unicode 编码），常用键值对应如下：

实际应用场景与键值转换

在 Web 应用中，常常可以看到利用 onkeydown 事件的 event.keyCode/event.which 来获取用户的一些键盘操作，从而运行某些运用的例子。如在用户登录时，如果按下了大写锁定键（20），则加以提示大写锁定；在有翻页的时候，如果用户按下左右箭头，触发上下翻页等。

获得 Unicode 编码值之后，如果需要得到实际对应的按键值，可以通过 Srting 对象的 fromCharCode 方法（String.fromCharCode()）获得。注意，对于字符获得的始终是大写字符，而对于其他一些功能按键，得到的字符可能不太易阅读。

PS：这里再为大家推荐一款关于JS事件的在线查询工具，归纳总结了JS常用的事件类型与函数功能：

javascript事件与功能说明大全：

http://tools.jb51.net/table/javascript_event