keyCode charCode 详解

最新推荐文章于 2024-07-07 20:23:07 发布

yg_201314

最新推荐文章于 2024-07-07 20:23:07 发布

阅读量247

点赞数

分类专栏： JS 文章标签： js ViewUI

本文链接：https://blog.csdn.net/yg_201314/article/details/84175834

版权

JS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

键盘事件拥有两个属性， keyCode 和 CharCode ，他们之间有一些不一样之处。 keyCode 表示用户按下键的实际的编码，而 charCode 是指用户按下字符的编码。

IE 下

keyCode ：对于 keypress 事件，表示按下按键的 Unicode 字符；对于 keydown/keyup 事件，表示按下按键的数字代码。

无 charCode 属性。

DOM 标准下

keyCode ：表示按下按键的数字代码。

charCode ：按下按键的 Unicode 字符。

当我按下 “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 事件（具体原因见我的另一篇文章 http://hi.baidu.com/duxiaokong/blog/item/99864d52a27a812842a75b8d.html ）。

在谷歌中会得到
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 （其他浏览器）。

参考资料： http://quirksmode.org/dom/events/keys.html

附测试代码：

<!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"
οnkeydοwn="handleEvent(event)"
οnkeypress="handleEvent(event)"
οnkeyup="handleEvent(event)"></textarea></p>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>