其实很长一段时间,我都没有完全弄明白keyCode 和charCode ,自己也认真看过,但是就是理解不透彻,为了防止以后再出现混乱,写篇博客记录一下吧!
首先 在不同的浏览器中,他们有不同的说法哦。
IE keyCode IE浏览器中event对象的属性(方法),
类型:Integer 可读写
描述:对于keypress事件,指示按下的键的Unicode字符;对于keyup\keydown 事件,指示按下的键盘是数字表示键。
/*获取键盘的keycode 值*/
document.onkeydown=function(event){
var event=event||window.event;
document.getElementById("showZone").innerHTML=event.keyCode;
};
DOM keyCode DOM浏览器中event对象的属性(方法),
类型:Integer 可读写
描述:指示按下的键盘的数字表示键。
charCode DOM浏览器中event对象的属性(方法),
类型:Integer 可读
描述:指示按下的键的Unicode字符值;
/**完整测试代码/
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n>" + oEvent.type; //获取事件的类型
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id; //获取引起该事件的元素/对象
//Dom支持的是target,IE支持的是srcElement
oTextbox.value += "\n keyCode is " + oEvent.keyCode;
oTextbox.value += "\n charCode is " + oEvent.charCode;
//oTextbox.value += "\n dxk is " + String.fromCharCode(oEvent.charCode);
var arrKeys = [];
if (oEvent.shiftKey) {
arrKeys.push("Shift");
}
if (oEvent.ctrlKey) {
arrKeys.push("Ctrl");
}
if (oEvent.altKey) {
arrKeys.push("Alt");
}
oTextbox.value += "\n keys down are " + arrKeys;
}
</script>
</head>
<body>
<p>Type some characters into the first textbox.</p>
<p><textarea id="txtInput" rows="15" cols="50"
onkeydown="handleEvent(event)"
onkeypress="handleEvent(event)"
onkeyup="handleEvent(event)"></textarea></p>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
参考资料:http://blog.csdn.net/yezhouyong/article/details/8991540
当我按下“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
小结:在keydown事件里面,事件包含了keyCode –
用户按下的按键的物理编码。在keypress里,keyCode包含了字符编码,即表示字符的ASCII码。这样的形式适用于所有的浏览器 –
除了火狐,它在keypress事件中的keyCode返回值为0。
如果你想获取用户实际敲击的按钮,用keydown事件来获取事件对象,并获取keyCode值,这在所有浏览器都行的通。另一方面,如果你想获取用户输
入的字符,那么就使用keypress来获取,然后获取charCode(火狐和safari)或是keyCode(其他浏览器)。
字母和数字键的键码值(keyCode) | |||||||
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
A | 65 | J | 74 | S | 83 | 1 | 49 |
B | 66 | K | 75 | T | 84 | 2 | 50 |
C | 67 | L | 76 | U | 85 | 3 | 51 |
D | 68 | M | 77 | V | 86 | 4 | 52 |
E | 69 | N | 78 | W | 87 | 5 | 53 |
F | 70 | O | 79 | X | 88 | 6 | 54 |
G | 71 | P | 80 | Y | 89 | 7 | 55 |
H | 72 | Q | 81 | Z | 90 | 8 | 56 |
I | 73 | R | 82 | 0 | 48 | 9 | 57 |
数字键盘上的键的键码值(keyCode) | 功能键键码值(keyCode) | ||||||
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 |
1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 |
2 | 98 | * | 106 | F3 | 114 | F9 | 120 |
3 | 99 | + | 107 | F4 | 115 | F10 | 121 |
4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 |
5 | 101 | - | 109 | F6 | 117 | F12 | 123 |
6 | 102 | . | 110 | ||||
7 | 103 | / | 111 |
控制键键码值(keyCode) | |||||||
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 |
Tab | 9 | Spacebar | 32 | Dw Arrow | 40 | .> | 190 |
Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
Control | 17 | Home | 36 | ;: | 186 | \| | 220 |
Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 |
Cape Lock | 20 | Up Arrow | 38 | ,< | 188 | '" | 222 |
多媒体键码值(keyCode) | |||||||
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
音量加 | 175 | ||||||
音量减 | 174 | ||||||
停止 | 179 | ||||||
静音 | 173 | ||||||
浏览器 | 172 | ||||||
邮件 | 180 | ||||||
搜索 | 170 | ||||||
收藏 | 171 |