js 监听按键事件
一个输入框
主要事件
onkeydown 按下一个按键时执行
onkeypress 按下键盘按钮时执行，不是适用于所有按键(如： ALT, CTRL, SHIFT, ESC)
onkeyup 释放键盘按钮时执行
监听所有按键事件
document.addEventListener('keydown', (event: KeyboardEvent) => {
});123
监听输入框按键事件
document.querySelector('input').addEventListener('keydown', (event: KeyboardEvent) => {
});123
KeyboardEvent 的主要属性
interface KeyboardEvent {
readonly altKey: boolean; // 按下了 alt 键
readonly code: string; // 按键的内容 例如 Enter KeyK，请注意手机上按键的确认键无法获取，区分左右按键 AltLeft
readonly ctrlKey: boolean; // 是否按住了 ctrl 键
readonly key: string; // 键名 例如 Enter、k 字母区分大小写
readonly keyCode: number; // 键的字符代码，已废弃的属性，不建议试用
readonly shiftKey: boolean; // 是否按住了 shift 键
readonly metaKey: boolean; // 是否按住了 win 键
}123456789
使用建议
获取 字母按键 请使用 event.code
获取其他特殊按键（Enter、Tab） 请使用 event.key
例如：输入框确认事件
document.querySelector('input').addEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === 'Enter') {
// TODO 确认
}
});12345
监听复制快捷键
document.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.ctrlKey && event.code === 'KeyC') {
// TODO 复制
}
});12345
转载请保留原文链接： https://zodream.cn/blog/id/214.html