键盘事件拥有两个属性，keyCode和CharCode，他们之间有一些不一样之处。keyCode表示用户按下键的实际的编码，而charCode是指用户按下字符的编码。
IE下
keyCode：对于keypress事件，表示按下按键的Unicode字符；对于keydown/keyup 事件，表示按下按键的数字代码。无charCode属性。
DOM标准下
keyCode： 表示按键的数字代码。 (表示用户按下键的实际的编码,即用户实际敲击的按钮,不区分大小写,字母"a"和"A"都是显示"65",
即键盘上"A"键的数字代码是"65")
charCode：表示按键的Unicode值。(表示用户按下字符的编码,返回输入的字符的编码,区分大小写,字母"a"显示"97",字母"A"显示"65")
关于按键的数字代码与按键的Unicode值的区别,其主要区别在于大小写,当然也要考虑keyCode与charCode属性在浏览器中的兼容性
实例1:
<html>
<head>
<title>键盘事件</title>
<script language="javascript">
function handle(oEvent){
if(window.event) oEvent = window.event; //处理兼容性，获得事件对象
var oDiv = document.getElementById("display");
oDiv.innerHTML += oEvent.type + ": keyCode:" + oEvent.keyCode + " charCode:" + oEvent.charCode + "<br>";
}
window.onload = function(){
var oTextArea = document.getElementsByTagName("textarea")[0];
oTextArea.onkeydown = handle; //监听所有键盘事件
oTextArea.onkeypress = handle;
oTextArea.onkeyup = handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>当我按下"a"键（注意是小写的字母）时，
在火狐中会得到
keydown：keyCode is 65 charCode is 0
keypress：keyCode is 0 charCode is 97
keyup： keyCode is 65 charCode is 0
在谷歌中会得到
keydown：keyCode is 65 charCode is 0
keypress：keyCode is 97 charCode is 97
keyup： keyCode is 65 charCode is 0
在IE中会得到
keydown：keyCode is 65 charCode is undefined
keypress：keyCode is 97 charCode is undefined
keyup： keyCode is 65 charCode is undefined
而当我按下shift键时，
在火狐中会得到
keydown：keyCode is 16 charCode is 0
keyup： keyCode is 16 charCode is 0
不会得到任何的charCode值，因为按shift并没输入任何的字符，而且也不会触发keypress事件。
在谷歌中会得到
keydown：keyCode is 16 charCode is 0
keyup： keyCode is 16 charCode is 0
在IE中会得到
keydown：keyCode is 16 charCode is undefined
keyup： keyCode is 16 charCode is undefined
实例2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>推箱子实例</title>
<style type="text/css">
#box {width:110px; height:110px; position:absolute; left:10px; top:10px;}
</style>
<script type="text/javascript">
var x = 10, y = 10;
window.onload = function(){
document.onkeydown = function(event){
var code;
//获取事件对象
if(window.event) {
code = window.event.keyCode;
} else {
code = event.keyCode;
}
switch(code) {
case 37: //左
x--;
break;
case 38: //上
y--;
break;
case 39: //右
x++;
break;
case 40: //下
y++;
break;
}
//更新箱子的位置
document.getElementById('box').style.left = x + 'px';
document.getElementById('box').style.top = y + 'px';
}
}
</script>
</head>
<body>
<div id="box"><img src="bg.png" width="110" height="110"/></div>
</body>
</html>注意： 要想实现推箱子的效果, <div>元素样式必须设置成绝对定位
小结：
1.在keydown事件里面，事件包含了keyCode – 用户按下的按键的物理编码。
2.在keypress里,keyCode包含了字符编码,即表示字符的ASCII码(IE浏览器)。
如果你想获取用户实际敲击的按钮，用keydown事件来获取事件对象，并获取keyCode值，这在所有浏览器都行的通。(onkeydown事件,采用keycode属性)
另一方面，如果你想获取用户输入的字符(按键的Unicode值)，那么就使用keypress来获取，然后获取charCode(火狐和safari),
但是IE没有charCode属性,其解决方案:
if(window.event){
oEvent = window.event; //处理兼容性，获得事件对象
//设置IE的charCode值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; //解决方案
}
var oTarget;
if(oEvent.srcElement) //处理兼容性，获取事件目标
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;理解:由于IE浏览器没有charcode,而keyCode只有在keydown、keyup事件发生时才与标准的DOM的keyCode相同，
在IE浏览器在keypress事件发生时,keycode的返回值是按键的Unicode值,而标准的DOM返回的是按键的数字代码,
通过三目运算符为IE浏览器设置charcode属性, 返回按键的Unicode值, 做到了与标准的DOM的charcode的属性一致
charcode keycode(keypress) keycode(keydown、keyup)
IE 无 按键的Unicode值(区分大小写) 按键的数字代码(不区分大小写)
标准DOM 按键的Unicode值 按键的数字代码 按键的数字代码
使用以下代码后：oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; (注意：此语句是放在事件处理函数内)
charcode keycode(keypress) keycode(keydown、keyup)
IE 按键的Unicode值 按键的Unicode值 按键的数字代码
标准DOM 按键的Unicode值 按键的数字代码 按键的数字代码
<html>
<head>
<title>键盘事件</title>
<script language="javascript">
function handle(oEvent){
if(window.event){
oEvent = window.event; //处理兼容性，获得事件对象
//设置IE的charCode值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
}
var oDiv = document.getElementById("display");
//输出测试
oDiv.innerHTML += oEvent.type + ": charCode:" + oEvent.charCode + " keyCode:" + oEvent.keyCode + "<br>";
}
window.onload = function(){
var oTextArea = document.getElementsByTagName("textarea")[0];
oTextArea.onkeypress = handle;
oTextArea.onkeydown = handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>输入字母aA
在IE浏览器测试结果:
keydown: charCode:0 keyCode:65 //按下字母a键
keypress: charCode:97 keyCode:97 //按下字母a键
keydown: charCode:0 keyCode:20 //按下大小写键caps lock
keydown: charCode:0 keyCode:65 //按下字母A键
keypress: charCode:65 keyCode:65 //按下字母A键
在火狐浏览器测试的结果
keydown: charCode:0 keyCode:65 //按下字母a键
keypress: charCode:97 keyCode:0 //按下字母a键
keydown: charCode:0 keyCode:20 //按下大小写键caps lock
keydown: charCode:0 keyCode:65 //按下字母A键
keypress: charCode:65 keyCode:0 //按下字母A键
归纳总结:
在keydown/keyup事件下,使用keycode属性(按键的数字代码)能兼容所有的浏览器
if(window.event){
oEvent = window.event; //处理兼容性，获得事件对象
//设置IE的charCode值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
}
使用以上代码:
在keypress事件下, 使用charCode属性(获取按键的Unicode值,区分大小写)能兼容所有的浏览器, 也能区分大小写