KeyboardEvent keyCode 属性
KeyboardEvent keyCode 属性
实例
获取按下的键盘按键的 Unicode 值：
var x = event.keyCode;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>在输入字段中按键盘上的某个键可获取被按下键的 Unicode 字符代码。</p>
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
/* 在本例中，我们使用跨浏览器解决方案，因为 keyCode 属性在 Firefox 中对 onkeypress 事件不起作用。但 which 属性可以。
对下面函数中第一行的解释：如果浏览器支持 event.which，则使用 event.which，否则使用 event.keyCode */
function myFunction(event) {
var x = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "The Unicode value is: " + x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
keyCode 属性返回触发 onkeypress 事件 的按键的 Unicode 字符代码，或触发 onkeydown 或 onkeyup 事件 的按键的 Unicode 按键代码。
两种代码类型的区别：
- 字符代码 - 代表 ASCII 字符的数字
- 按键代码 - 代表键盘上实际键的数字
这些类型并不总是意味着同样的事情。例如，小写 "w" 和大写 "W" 的键盘代码相同，因为在键盘上按下的键是相同的（"W" = 数字 "87"），但字符代码不同，因为 resulting 字符是不同的（"w" 或 "W"，即 "119" 或 "87"）- 请查看下面的更多实例，可以对这一点有更好的理解。
提示：如需了解用户是否按下了可打印的键（例如 "a" 或 "5"），建议在 onkeypress 事件上使用此属性。要了解用户是否按下了功能键（例如 "F1"、"CAPS LOCK" 或 "Home"），请使用 onkeydown 或 onkeyup 事件。
注释：在 Firefox 中，keyCode 属性对 onkeypress 事件不起作用（只会返回 0）。为了跨浏览器的解决方案，请将 which 属性与 keyCode 一起使用，例如：
var x = event.which || event.keyCode; // 使用 which 还是 keyCode，取决于浏览器支持
提示：有关所有 Unicode 字符的列表，请参阅我们的 完整 Unicode 参考。
提示：如果要将 Unicode 值转换为字符，请使用 fromCharCode() 方法。
注释：该属性只读。
注释：提供 keyCode 和 which 属性只是为了兼容性。最新版本的 DOM 事件规范建议使用 key 属性代替（如果可用）。
提示：如果您想知道在发生按键事件时是否按下了 "ALT"、"CTRL"、"META" 或 "SHIFT" 键，请使用 altKey、ctrlKey/、metaKey 或 shiftKey 属性。
浏览器支持
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| keyCode | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
event.keyCode技术细节
| 返回值： | 数字值，表示 Unicode 字符代码或 Unicode 按键代码。 |
|---|---|
| DOM 版本： | DOM Level 2 Events |
更多实例
示例代码：
使用 onkeypress 和 onkeydown 来演示字符代码与键盘代码之间的区别：
<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">
function uniCharCode(event) {
var char = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " + char;
}
function uniKeyCode(event) {
var key = event.keyCode;
document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}
按键盘上的 "a" 键（不使用 Capslock）时，char 和 key 的结果将是：
Unicode CHARACTER code: 97
Unicode KEY code: 65
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>在输入栏中按键盘上的任意键可以得到 Unicode 字符代码和被按下键的 Unicode 键盘代码。</p>
<p><b>注释：</b>keyCode 属性对不可打印的功能键（如 CAPS LOCK、CTRL、ESC、F12 等）的 onkeypress 事件不起作用。</p>
<input type="text" size="50" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">
<p>onkeypress - <span id="demo"></span></p>
<p>onkeydown - <span id="demo2"></span></p>
<script>
function uniCharCode(event) {
var char = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "The Unicode CHARACTER code is: " + char;
}
function uniKeyCode(event) {
var key = event.keyCode;
document.getElementById("demo2").innerHTML = "The Unicode KEY code is: " + key;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
如果用户按下 Escape 键，则提示一些文本：
<input type="text" onkeydown="myFunction(event)">
function myFunction(event) {
var x = event.keyCode;
if (x == 27) { // 27 是 ESC 键
alert ("You pressed the Escape key!");
}
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>在输入字段中按键盘上的 Escape/Esc 键（通常在左上角），来提示一些文本。</p>
<input type="text" size="50" onkeydown="keyCode(event)">
<script>
function keyCode(event) {
var x = event.keyCode;
if (x == 27) {
alert ("You pressed the Escape key!");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
将 Unicode 值转换为字符（不适用于功能键）：
var x = event.keyCode; // 获取 Unicode 值
var y = String.fromCharCode(x); // 将值转换为字符
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>在输入字段中按键盘上的某个键可获取被按下键的数字和字符。</p>
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.keyCode; // 获取 Unicode 值
var y = String.fromCharCode(x); // 将值转换为字符
document.getElementById("demo").innerHTML = "Number: " + x + " = Character: " + y;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
