这是我参与更文挑战的第29天，活动详情查看：更文挑战
键盘与输入事件
键盘事件是用户操作键盘时触发的。键盘事件包含 3 个事件：
- keydown: 用户按下键盘上某个键时触发，而且持续按住会
重复触发。 - keypress: 用户按下键盘上某个键并
产生字符时触发，而且持续按住会重复触发。DOM3 Events废弃了keypress事件，而推荐textInput事件。 - keyup: 用户释放键盘上某个键时触发。
输入事件只有一个，即 textinput 事件。 textInput 会在文本被插入到文本框之前触发。
当用户按下键盘上的某个字符键时，首先会触发 keydown 事件，然后触发 keypress 事件，最后触发 keyup 事件。注意，这里 keydown 和 keypress 事件会在文本框出现变化之前触发，而 keyup 事件会在文本框出现变化之后触发。
1.键码
对于 keydown 和 keyup 事件， event 对象的 keyCode 属性中会保存一个键码，对应键盘上特定的一个键。对于字母和数字键， keyCode 的值与小写字母和数字的 ASCII 编码一致。
下面展示如何使用 keyCode 属性：
let textbox = document.getElementById("myText");
textbox.addEventListener("keyup", (event) => {
console.log(event.keyCode);
});
我们也可以在这里找到键盘上对应的值。
2.字符编码
keypress 事件发生时，意味着按键会影响屏幕上显示的文本。对插入或移除字符的键，所有浏览器都会触发 keypress 事件。
浏览器在 event 对象上支持 charCode 属性，只有发生 keypress 事件时这个属性才会被设置值，包含的是按键字符对应的 ASCII 编码。通常，charCode 属性的值是 0，在 keypress 事件发生时则是对应按键的键码。
可以使用以下代码获取按键的字符编码：
var EventUtil = {
// 其他代码
getCharCode: function(event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode;
}
},
// 其他代码
};
let textbox = document.getElementById("myText");
textbox.addEventListener("keypress", (event) => {
console.log(EventUtil.getCharCode(event));
});
有了字母编码，我们就可以用 String.fromCharCode() 方法将其转换为实际的字符了。
3.DOM3的变化
(1) key 和 char
尽管所有浏览器都实现了某种形式的键盘事件，DOM3 Events 还是定义了 key 和 char 两个新属性。用来取代上面两个属性。
key 用于替代 keyCode，且包含字符串。在按下字符键时，key 的值等于文本字符（如k或M）；在按下非字符键时，key 的值是键名（如Shift或ArrowDown）。 char 属性在按下字符键时与 key 类似，在按下非字符键时为 null。但这两个属性在浏览器中支持的并不是很完全，因此不建议使用。
使用方式如下：
let textbox = document.getElementById("myText");
textbox.addEventListener("keypress", (event) => {
let identifier = event.key || event.keyIdentifier;
if (identifier) {
console.log(identifier);
}
});
(2) location
location 属性是一个数值，表示是在哪里按的键。可能的值为：
0是默认键1是左边（如左边的Alt键）2是右边（如右边的Shift键）3是数字键盘4是移动设备（即虚拟键盘）5是游戏手柄（如任天堂Wii控制器）
IE9 支持这些属性。 Safari 和 Chrome 支持一个等价的 keyLocation 属性，但是只有两个值 0 和 3。做跨浏览器开发时，不建议使用。
使用方法：
let textbox = document.getElementById("myText");
textbox.addEventListener("keypress", (event) => {
let loc = event.location || event.keyLocation;
console.log(loc || null);
});
(3) getModifierState()
这个方法接收一个参数，一个等于 Shift 、 Control 、 Alt 、 AltGraph 或 Meta 的字符串，表示要检测的修饰键。如果给定的修饰键处于激活状态（键被按住），则方法返回 true ，否则返回 false。
使用方法：
let textbox = document.getElementById("myText");
textbox.addEventListener("keypress", (event) => {
if (event.getModifierState) {
console.log(event.getModifierState("Shift"));
}
});
