在前端开发中，我们经常会接触到键盘事件。键码和字符码是与键盘事件相关的两个重要概念。本文将详细介绍键码和字符码的概念、区别及其在前端开发中的应用。
什么是键码和字符码？
键码和字符码都是与键盘事件相关的概念。在用户按下或释放键盘上的按键时，浏览器会触发键盘事件，并提供一个包含键码和字符码的事件对象。
键码是表示计算机硬件检测到的键盘上的物理键所对应的数字代码。在不同的操作系统和浏览器中，相同的按键可能会有不同的键码值。
字符码则是根据用户当前使用的键盘布局和语言环境，将键盘上的按键映射为字符的编码。字符码通常是 Unicode 编码的字符值。
键码和字符码的区别
键码和字符码的区别在于它们代表的信息不同。键码是计算机硬件检测到的键盘上的物理键对应的数字代码，而字符码则是按下键盘按钮后转换成的字符编码。
举个例子，当用户按下键盘上的字母 “A” 键时，键盘会发送一个键码值到浏览器。在美国键盘布局下，这个键码值是 65；而在法国键盘布局下，这个键码值是 81。同时，根据用户当前的语言环境，这个键码值会被转换成不同的字符编码。在英文环境下，它会被转换成字符 “A”，在中文环境下，则可能被转换成汉字 “阿”。
如何获取键码和字符码？
在 JavaScript 中，我们可以通过键盘事件对象的属性来获取键码和字符码。
document.addEventListener('keydown', function(event) {
const keyCode = event.keyCode || event.which; // 获取键码
const charCode = String.fromCharCode(keyCode); // 获取字符码
console.log(`keyCode: ${keyCode}`);
console.log(`charCode: ${charCode}`);
});上面的代码中，我们使用了 event.keyCode 和 event.which 来获取键码，使用 String.fromCharCode() 方法将键码转换为字符码。需要注意的是，由于不同的浏览器实现可能略有不同，所以需要同时使用 event.keyCode 和 event.which 来确保兼容性。
应用场景
在前端开发中，键码和字符码常常用于实现键盘快捷键、输入框验证等功能。例如，我们可以根据用户按下的键盘按键来触发对应的操作：
// 监听键盘事件
document.addEventListener('keydown', function(event) {
const keyCode = event.keyCode || event.which;
if (keyCode === 13) { // 用户按下回车键
submitForm();
}
});又如，我们可以在输入框中限制只能输入数字：
// 监听输入事件
const inputElement = document.getElementById('input');
inputElement.addEventListener('keypress', function(event) {
const keyCode = event.keyCode || event.which;
if (keyCode < 48 || keyCode > 57) { // 只允许输入 0-9 的数字
event.preventDefault();
}
});总结
本文介绍了键码和字符码的概念、区别及其在前端开发中的应用。了解键码和字符码有助于我们处理键盘事件，实现更加灵活和智能的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14962