一、keyCode基础知识
keyCode是浏览器所支持的键盘按键编码，是一个由数字组成的值，代表了不同的键位。通过keyCode，我们可以获取用户所按下的按键信息，从而实现用户的交互操作。
在JavaScript中，我们可以通过事件对象来获取keyCode的值。比如，在keydown或者keyup事件当中，我们可以使用event.keyCode获取键盘按键编码对应的数字值。当然，我们也可以通过event.which获取键盘按键编码对应的数字值。
需要注意的是，keyCode值是与键盘布局相关的，不同的键盘布局所对应的keyCode是不同的。所以，在实际开发中，我们需要对不同的键盘布局进行兼容。
二、常用的keyCode值
在实际开发中，我们经常需要用到一些常用的keyCode值，这些keyCode值对于实现一些交互操作非常有帮助。
比如，在表格组件中，我们经常需要响应上下左右箭头键进行表格的移动；在文本框组件中，我们经常需要响应回车键进行提交操作。下面是一些常用的keyCode值：
// 常用的keyCode值
const keyCode = {
BACKSPACE: 8, // 退格键
TAB: 9, // 制表键
ENTER: 13, // 回车键
SHIFT: 16, // Shift键
CTRL: 17, // Ctrl键
ALT: 18, // Alt键
CAPS_LOCK: 20, // 大写锁定键
ESC: 27, // ESC键
SPACE: 32, // 空格键
PAGE_UP: 33, // PageUp键
PAGE_DOWN: 34, // PageDown键
END: 35, // End键
HOME: 36, // Home键
LEFT: 37, // Left键
UP: 38, // Up键
RIGHT: 39, // Right键
DOWN: 40, // Down键
DELETE: 46 // Delete键
}
三、兼容不同键盘布局
如上所述，不同的键盘布局所对应的keyCode是不同的，因此，在编写代码时，要考虑到兼容不同键盘布局的情况。
我们可以使用event.key或者event.code来获取当前按下的键的键盘布局相关信息。event.key返回的是表示按下的键的字符串，而event.code则返回的是表示按下的键的标识符，这两个值在不同键盘布局下是不变的。
下面是一个获取键盘布局信息并进行兼容的示例：
document.addEventListener('keydown', function(event) {
const keyCode = event.keyCode || event.which;
const key = event.key || event.code;
switch(key) {
case 'Enter':
// 回车键
console.log('Enter key pressed');
break;
case 'ArrowLeft':
// 左箭头键
console.log('ArrowLeft key pressed');
break;
case 'ArrowDown':
// 下箭头键
console.log('ArrowDown key pressed');
break;
case 'ArrowRight':
// 右箭头键
console.log('ArrowRight key pressed');
break;
case 'ArrowUp':
// 上箭头键
console.log('ArrowUp key pressed');
break;
default:
// 其他按键
console.log('KeyCode: ' + keyCode + ', key: ' + key);
break;
}
});
四、keyCode的限制和安全性
在一些安全性较高的场景下，需要限制用户输入一些特定的字符或者键位。比如，密码框中通常不允许用户输入特殊符号，复制密码的时候也需要禁用Ctrl+C快捷键。
为了实现这些限制，我们可以通过检查用户所按下的keyCode值来判断用户是否输入了被限制的字符或者键位。例如，我们可以通过检查keyCode值来禁用Ctrl+C的快捷键：
document.addEventListener('keydown', function(event) {
if ((event.ctrlKey || event.metaKey) && (event.keyCode === 67 || event.keyCode === 86)) {
event.preventDefault(); // 阻止默认事件
}
});
当用户按下Ctrl+C或者Ctrl+V时，会触发浏览器默认的复制、粘贴事件。在上述示例中，我们检查了event.ctrlKey和event.metaKey，这两个值分别对应了操作系统中的Ctrl和Command键。如果用户同时按下了Ctrl键并且按下了C或者V键，就会执行event.preventDefault()来阻止浏览器默认的事件，从而达到禁用快捷键的目的。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303193.html
微信扫一扫 
支付宝扫一扫 