js 监听按键事件

Fork Me On Github

js 监听按键事件

一个输入框

 
<input type="text">
1

主要事件

onkeydown 按下一个按键时执行

onkeypress 按下键盘按钮时执行,不是适用于所有按键(如: ALT, CTRL, SHIFT, ESC)

onkeyup 释放键盘按钮时执行

监听所有按键事件

ts
   
document.addEventListener('keydown', (event:  KeyboardEvent) => {

});
123

监听输入框按键事件

ts
   
document.querySelector('input').addEventListener('keydown', (event:  KeyboardEvent) => {

});
123

KeyboardEvent 的主要属性

ts
         
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

例如:输入框确认事件

ts
     
document.querySelector('input').addEventListener('keydown', (event:  KeyboardEvent) => {
    if (event.key === 'Enter') {
        // TODO 确认
    }
});
12345

监听复制快捷键

ts
     
document.addEventListener('keydown', (event:  KeyboardEvent) => {
    if (event.ctrlKey && event.code === 'KeyC') {
        // TODO 复制
    }
});
12345
点击查看全文
0 442 0