一、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()来阻止浏览器默认的事件,从而达到禁用快捷键的目的。