javascript基础从小白到高手系列一百五十六：字符编码

在keypress 事件发生时，意味着按键会影响屏幕上显示的文本。对插入或移除字符的键，所有浏
览器都会触发keypress 事件，其他键则取决于浏览器。因为DOM3 Events 规范才刚刚开始实现，所
以不同浏览器之间的实现存在显著差异。
浏览器在event 对象上支持charCode 属性，只有发生keypress 事件时这个属性才会被设置值，包含的是按键字符对应的ASCII 编码。通常，charCode 属性的值是0，在keypress 事件发生时则是
对应按键的键码。IE8 及更早版本和Opera 使用keyCode 传达字符的ASCII 编码。要以跨浏览器方式获
取字符编码，首先要检查charCode 属性是否有值，如果没有再使用keyCode，如下所示：
var EventUtil = {
// 其他代码
getCharCode: function(event) {
if (typeof event.charCode == “number”) {
return event.charCode;
} else {
return event.keyCode;
}
},
// 其他代码
};
这个方法检测charCode 属性是否为数值（在不支持的浏览器中是undefined）。如果是数值，则
返回。否则，返回keyCode 值。可以像下面这样使用：
let textbox = document.getElementById(“myText”);
textbox.addEventListener(“keypress”, (event) => {
console.log(EventUtil.getCharCode(event));
});
一旦有了字母编码，就可以使用String.fromCharCode()方法将其转换为实际的字符了。
DOM3 的变化
尽管所有浏览器都实现了某种形式的键盘事件，DOM3 Events 还是做了一些修改。比如，DOM3
Events 规范并未规定charCode 属性，而是定义了key 和char 两个新属性。
其中，key 属性用于替代keyCode，且包含字符串。在按下字符键时，key 的值等于文本字符（如
“k”或“M”）；在按下非字符键时，key 的值是键名（如“Shift”或“ArrowDown”）。char 属性在按
下字符键时与key 类似，在按下非字符键时为null。
IE 支持key 属性但不支持char 属性。Safari 和Chrome 支持keyIdentifier 属性，在按下非字
符键时返回与key 一样的值（如“Shift”）。对于字符键，keyIdentifier 返回以“U+0000”形式表示
Unicode 值的字符串形式的字符编码。
let textbox = document.getElementById(“myText”);
textbox.addEventListener(“keypress”, (event) => {
let identifier = event.key || event.keyIdentifier;
if (identifier) {
console.log(identifier);
}
});
由于缺乏跨浏览器支持，因此不建议使用key、keyIdentifier、和char。
DOM3 Events 也支持一个名为location 的属性，该属性是一个数值，表示是在哪里按的键。可能
的值为：0 是默认键，1 是左边（如左边的Alt 键），2 是右边（如右边的Shift 键），3 是数字键盘，4 是
移动设备（即虚拟键盘），5 是游戏手柄（如任天堂Wii 控制器）。IE9 支持这些属性。Safari 和Chrome
支持一个等价的keyLocation 属性，但由于实现有问题，这个属性值始终为0，除非是数字键盘（此时值为3），值永远不会是1、2、4、5。
let textbox = document.getElementById(“myText”);
textbox.addEventListener(“keypress”, (event) => {
let loc = event.location || event.keyLocation;
if (loc) {
console.log(loc);
}
});
与key 属性类似，location 属性也没有得到广泛支持，因此不建议在跨浏览器开发时使用。
最后一个变化是给event 对象增加了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”));
}
});
当然，event 对象已经通过shiftKey、altKey、ctrlKey 和metaKey 属性暴露了这些信息。