js 监听按键事件

一个输入框

<input type="text">

主要事件

onkeydown 按下一个按键时执行

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

onkeyup 释放键盘按钮时执行

监听所有按键事件

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

});

监听输入框按键事件

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

});

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 复制
    }
});