js 监听按键事件
一个输入框
主要事件
onkeydown
按下一个按键时执行
onkeypress
按下键盘按钮时执行,不是适用于所有按键(如: ALT, CTRL, SHIFT, ESC)
onkeyup
释放键盘按钮时执行
监听所有按键事件
监听输入框按键事件
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 键
}
使用建议
获取 字母按键 请使用 event.code
获取其他特殊按键(Enter、Tab) 请使用 event.key
例如:输入框确认事件
document.querySelector('input').addEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === 'Enter') {
// TODO 确认
}
});
监听复制快捷键
document.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.ctrlKey && event.code === 'KeyC') {
// TODO 复制
}
});
转载请保留原文链接: https://zodream.cn/blog/id/214.html