先说一些有关键盘事件的事项：用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。在这3种事件类型中，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中是通用的，返回值为布尔值。还有一个metaKey属性，但IE表示不支持。
既然是比较三者的异同，第一件事肯定就是去了解它们的定义：
keyCode 属性返回onpress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
两种代码类型的区别是:
字符代码 - 表示 ASCII 字符的数字
键盘代码 - 表示键盘上真实键的数字
charCode 属性返回onpress事件触发键值的字母代码，仅用于字符代码。
which属性和keyCode类似，但是不兼容IE8以下的浏览器。
下面再来说说让人头疼的浏览器问题：兼容性！
1、在不同浏览器下如何转化为字符
(1)FireFox、Opera、Chrome
事件对应的函数有一个隐藏的变量e，表示发生事件。
e有一个属性e.which指示哪个键被按下，给出该键的索引值（按键码）。
静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。
eg：
1 <input type="text" id="text">
2 <script>
3 document.getElementById("text").onkeypress = function(e) {
4 alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));
5 };
6 </script> FireFox、Opera、Chrome输入“a”；
输出： “按键码：97 字符：a”
(2) IE
IE不需要e变量，window.event表示发生事件。
window.event有一个属性window.event.keyCode指示哪个键被按下，给出该键的索引值（按键码）。
静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。
eg：
1 <input type="text" id="text">
2 <script>
3 document.getElementById("text").onkeypress = function() {
4 alert("按键码: " + window.event.keyCode + " 字符: " + String.fromCharCode(window.event.keyCode));
5 };
6 </script>IE中输入：a
输出：按键码：97 字符：a
2、如何判断浏览器类型
利用navigator对象的appName属性。
IE：navigator.appName=="Microsoft Internet Explorer"
FireFox、Opera、Chrome：navigator.appName=="Netscape"
eg：
1 <input type="text" id="text">
2 <script>
3 document.getElementById("text").onkeypress = function(e) {
4 if (navigator.appName == "Microsoft Internet Explorer"){
5 alert("按键码: " + window.event.keyCode + " 字符: " + String.fromCharCode(window.event.keyCode));
6 }else if (navigator.appName == "Netscape") {
7 alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));
8 }
9 };
10 </script>IE、FireFox、Opera、Chrome中输入：a
输出：按键码：97 字符：a
由于当前浏览器没有相应属性的话会返回undefined，因此，利用||运算符简化如下：
1 <input type="text" id="text">
2 <script>
3 document.getElementById("text").onkeypress = function(e) {
4 e = e || window.event;
5 key = e.keyCode || e.which || e.charCode;
6 alert("按键码: " + key + " 字符: " + String.fromCharCode(key));
7 };
8 </script> 注意：IE只有keyCode属性，FireFox中有which和charCode属性，Opera中有keyCode和which属性，Chrome中有keyCode、which和charCode属性。IE8 及其更早版本不支持 which 属性。“DOM3级”提出的key属性虽好，由于兼容性问题，所以不建议用！
总结：在keydown事件里面，事件包括了keyCode - 用户按下的键的物理编码。在keypress里，keyCode包含了字符编码，即表示字符的ASCII编码。这样的形式适用于所以浏览器，除了火狐，它在keypress事件中的keyCode返回值为0；如果你想获取用户实际敲击的按钮，用keydown事件来获取事件对象，并获取keycode值，这在所有浏览器都行的通。另一方面，如果你想获取用户输入的字符，那么就使用keypress来获取，然后获取charCode【火狐或Safari】或keyCode【其他浏览器】。
随时随地看视频
