KeyboardEvent key 属性
JavaScript基础 2022-06-08 12:05:40小码哥的IT人生shichen
KeyboardEvent key 属性
实例
获取发生按键事件时按下的键盘按钮：
var x = event.key;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>在输入字段中按键盘上的某个键。</p>
<input type="text" size="40" onkeydown="myFunction(event)">
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.key;
document.getElementById("demo").innerHTML = "The pressed key was: " + x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
key 属性返回发生按键事件时按下的键的标识符。
按键标识符是标识键盘按钮的字符串。此属性的返回值可以是以下字符串：
- 单个字符（比如 "a", "W", "4", "+" 或 "$"）
- 多字符（比如 "F1", "Enter", "HOME" 或 "CAPS LOCK"）
注释：该属性只读。
提示：如果您想知道在发生按键事件时是否按下了 "ALT"、"CTRL"、"META" 或 "SHIFT" 键，请使用 altKey、ctrlKey、metaKey 或 shiftKey 属性。
浏览器支持
表中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| key | 51.0 | 9.0 | 23.0 | 不支持 | 38.0 |
语法
event.key技术细节
| 返回值： |
字符串，代表按下的键盘按钮。 可能的值：
注释：在 Safari 中返回未定义。 |
|---|---|
| DOM 版本： | DOM Level 3 |
更多实例
如果用户按下 "A" 键，则提示一些文本：
var x = event.key;
// 如果按下的键盘按钮是 "a" 或 "A"（使用 CapsLock 或 Shift），则提示一些文本。
if (x == "a" || x == "A") {
alert ("You pressed the 'A' key!");
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>在输入字段中按键盘上的 "A" 键来提示一些文本。</p>
<input type="text" size="40" onkeydown="myFunction(event)">
<script>
function myFunction(event) {
var x = event.key;
// 如果按下的键盘按钮是 "a" 或 "A"（使用大写锁定或移位），则提示一些文本。
if (x == "a" || x == "A") {
alert ("You pressed the 'A' key!");
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
