JavaScript 键盘事件全面控制与跨浏览器兼容实现
本文深入解析JavaScript中keydown、keypress和keyup三种键盘事件的机制与区别，重点阐述如何在IE、Firefox、Opera等主流浏览器中实现跨平台兼容。通过对比不同浏览器对keyCode、which及charCode属性的处理差异，提供完整的代码实现与优化方案，帮助开发者掌握键盘事件的高级应用技巧。
本文内容主要划分为四个核心部分。
第一部分：浏览器的按键事件；第二部分：兼容浏览器；第三部分：代码实现和优化；第四部分：总结。
浏览器的按键事件机制
第一部分：浏览器的按键事件
若使用JavaScript实现键盘记录功能，需重点关注浏览器触发的三种按键事件类型：keydown、keypress和keyup。它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。在一次典型的按键操作中，会依次触发上述三种事件：首先是keydown，接着是keypress，最后在按键释放时触发keyup。
在这三种事件类型中，keydown和keyup属于底层事件，而keypress则更为高级。此处“高级”的含义在于，当用户按下Shift + 1组合键时，keypress事件会对按键进行解析，返回可打印的“!”字符；而keydown和keyup仅记录Shift + 1这一原始按键事件[1]。
然而，keypress仅对可打印字符有效。对于功能键（如F1-F12、Backspace、Enter、Escape、PageUp、PageDown及方向键等），keypress事件不会触发，但keydown和keyup事件可以正常产生。需要注意的是，在FireFox浏览器中，功能键也能触发keypress事件。
传递给keydown、keypress和keyup事件句柄的事件对象包含一些通用属性。当Alt、Ctrl或Shift键与按键同时按下时，可通过事件的altKey、ctrlKey和shiftKey属性来标识，这些属性在FireFox和IE浏览器中均通用。
浏览器兼容性问题处理
第二部分：兼容浏览器
涉及浏览器端的JavaScript开发时，必须考虑浏览器兼容性问题。
目前常用的浏览器主要基于IE和Mozilla两大内核。Maxthon基于IE内核，而FireFox和Opera则基于Mozilla内核。
事件初始化与浏览器差异
2.1 事件的初始化
首先需要了解如何初始化该事件，基本语句如下：
function keyDown(){} document.onkeydown = keyDown;
当浏览器执行到该语句时，无论按下键盘上的哪个键，都将调用KeyDown()函数。
2.2 FireFox和Opera的实现方法
FireFox和Opera等浏览器的实现方式比IE复杂，因此此处先进行描述。
keyDown()函数包含一个隐藏变量，通常用字母“e”表示。 function keyDown(e) 变量e表示发生击键事件，要确定按下了哪个键，需使用which属性： e.which e.which将返回该键的索引值。要将索引值转换为对应的字母或数字字符，需使用静态函数String.fromCharCode()，示例如下： String.fromCharCode(e.which) 将上述语句结合，即可在FireFox中获取被按下的键：
function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
alert("按键码: " + keycode + " 字符: " + realkey);
}
document.onkeydown = keyDown;
2.3 IE的实现方法
IE浏览器无需e变量，而是使用window.event.keyCode来替代e.which。将键的索引值转化为真实键值的方法类似：String.fromCharCode(event.keyCode)，程序如下：
function keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("按键码: " + keycode + " 字符: " + realkey);
}
document.onkeydown = keyDown;
2.4 判断浏览器类型
了解了在不同浏览器中获取按键事件对象的方法后，接下来需要判断浏览器类型。该方法有多种，既有直观易懂的，也有巧妙的实现。先介绍一般方法：利用navigator对象的appName属性，当然也可使用userAgent属性。此处使用appName来判断浏览器类型，IE和Maxthon的appName为“Microsoft Internet Explorer”，而FireFox和Opera的appName为“Netscape”。因此，一个功能较简单的代码如下：
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;比较简洁的方法是[2]：
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.onkeyup = keyUp;
对上述方法简要解释如下：
首先，e=e||event; 这句代码用于实现浏览器事件对象获取的兼容。在JavaScript中，该语句意为：若在FireFox或Opera中，隐藏变量e存在，则e||event返回e；若在IE中，隐藏变量e不存在，则返回event。
其次，currKey=e.keyCode||e.which||e.charCode; 这句代码用于兼容浏览器按键事件对象的按键码属性（详见第三部分）。例如，IE中仅有keyCode属性，而FireFox中有which和charCode属性，Opera中有keyCode和which属性等。
上述代码仅实现了浏览器兼容，获取了keyup事件对象，并简单弹出了按键码和字符。但问题随之出现：按键时，字符键均显示为大写，而按下Shift键时，显示的字符异常。因此，需要对代码进行优化。
代码实现与优化策略
第三部分：代码实现和优化
3.1 按键事件的按键码和字符码
在IE中，仅有一个keyCode属性，且其解释取决于事件类型。对于keydown，keyCode存储的是按键码；对于keypress事件，keyCode存储的是字符码。IE中没有which和charCode属性，因此这两个属性始终为undefined。
在FireFox中，keyCode始终为0。在keydown/keyup事件中，charCode=0，which为按键码。在keypress事件中，which和charCode的值相同，均存储字符码。
在Opera中，keyCode和which的值始终相同。在keydown/keyup事件中，它们存储按键码；在keypress事件中，它们存储字符码。charCode未定义，始终为undefined。
3.2 用keydown/keyup还是keypress
第一部分已介绍keydown/keyup和keypress的区别，有一条较为通用的规则：keydown事件对功能按键最为有用，而keypress事件对可打印按键最为有用[3]。
键盘记录主要针对可打印字符和部分功能键，因此首选keypress。然而，正如第一部分所述，IE中keypress不支持功能键，因此应使用keydown/keyup事件进行补充。
3.3 代码的实现
总体思路是：使用keypress事件对象获取按键字符，使用keydown事件获取功能字符（如Enter、Backspace等）。
代码实现如下所示
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>js 按键记录</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="羽殇仁">
<META NAME="Keywords" CONTENT="js 按键记录">
<META NAME="Description" CONTENT="js 按键记录">
</HEAD>
<BODY>
<script type="text/javascript">
var keystring = "";//记录按键的字符串
function $(s){return document.getElementByIdx_x(s)?document.getElementByIdx_x(s):s;}
function keypress(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
//屏蔽了退格、制表、回车、空格、方向键、删除键
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey); break;
}
keystring += keyName;
}
function keydown(e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
case 8: keyName = "[退格]"; break;
case 9: keyName = "[制表]"; break;
case 13:keyName = "[回车]"; break;
case 32:keyName = "[空格]"; break;
case 33:keyName = "[PageUp]"; break;
case 34:keyName = "[PageDown]"; break;
case 35:keyName = "[End]"; break;
case 36:keyName = "[Home]"; break;
case 37:keyName = "[方向键左]"; break;
case 38:keyName = "[方向键上]"; break;
case 39:keyName = "[方向键右]"; break;
case 40:keyName = "[方向键下]"; break;
case 46:keyName = "[删除]"; break;
default:keyName = ""; break;
}
keystring += keyName;
}
$("content").innerHTML=keystring;
}
function keyup(e)
{
$("content").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<input type="text" />
<input type="button" value="清空记录" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>请按下任意键查看键盘响应键值：<span id="content"></span>
</BODY>
</HTML>代码分析：
$()：根据ID获取DOM元素。
keypress(e)：实现对字符码的截获。由于功能按键需通过keydown获取，因此在keypress中屏蔽了这些功能按键。
keydown(e)：主要实现对功能按键的获取。
keyup(e)：展示截获的字符串。
代码基本实现完成！呵呵
总结与局限性分析
第四部分：总结
编写代码的最初目的是通过JavaScript记录按键，并返回一个字符串。
上述代码仅使用JavaScript实现了基本的英文按键记录，对汉字无能为力。记录汉字时，我能想到的办法是使用JavaScript，通过keydown和keyup记录底层按键事件，但汉字解析依然无能为力。当然，可以使用DOM方式直接获取input中的汉字，但这已偏离本文讨论的用按键事件实现按键记录的本意。
上述代码还可以实现添加剪切板功能、监控删除功能等……
这篇浅谈js键盘事件全面控制就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33