前端使用原生js实现全局快捷键功能

前端周神

已于 2023-10-30 14:17:28 修改

阅读量2.1k

点赞数 2

文章标签： javascript 前端 vue angular react typescript

于 2023-01-19 11:54:08 首次发布

本文链接：https://blog.youkuaiyun.com/z37411/article/details/128733576

版权

文章介绍了如何使用JavaScript监听键盘事件，包括开启监听、处理键盘事件、监听组合键，以及如何销毁监听。此外，还提供了一个用TypeScript封装的键盘输入类，用于方便地管理键盘监听和获取按键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

有很多地方都需要快捷键的功能，比如在页面或者各种软件当中；当各种快捷键快捷键都不好使时就可以试试用原生js来实现快捷键的功能，实现思路主要就是使用document.onkeydown来监听键盘事件并作出对应的处理，文章最后我使用ts封装了一个class，可以直接拿去用，js直接把类型删除即可。

一、监听键盘事件

1.开启监听

注意建议不要取消键盘的默认事件，不然会导致在开启监听的同时页面的其他地方用不了键盘，例如表单输入时，如果想要页面全局起作用则在最外层的组件就开启监听。

document.onkeydown = (e) => {}

2.处理键盘事件

监听到键盘事件后，使用正则或者其他判断来对事件进一步处理

document.onkeydown = (e) => {

let isAlpNum = /[a-zA-Z]{1}/.test(e.key) ;//监听英文大小写字母，这里条件可以自己改

if (isAlpNum) {

//如果条件通过则处理自己想处理逻辑

}

if (e.key === "Enter") {

可以通过监听enter来确定逻辑是否处理完毕

}

};

3.监听键盘组合键

通过组合键来可以实现快监听键盘实现快捷键功能或者设置快捷键，这里拿ctrl和shift来做示范，具体用什么组合键可以自己修改。

document.onkeydown = (e) => {

var keyCode = e.key;

var ctrlKey = e.ctrlKey;

var shiftKey = e.shiftKey;

        if (ctrlKey && shiftKey) {

//这里可以处理同时按下ctrl和shift时的逻辑，加上其他按键可以实现快捷键功能

          switch (keyCode) {

        case 'k':

console.log("快捷键k");

      break;

default:

break;

}

        }

}

二、销毁键盘监听事件

1.注意事项

注意不要开启多个监听，在组件初始化时开启键盘监听，在组件销毁时销毁键盘监听，或者在每次开启监听前销毁上一个键盘监听事件。

2.销毁

document.onkeydown = null;

三、封装一个监听键盘输入的类

1、代码如下

/**

*监听键盘输入的类

*/

export class KeyboardInput {

constructor(listening: boolean = false) {

if (listening) this.startListening();

}

private alreadyListen = false;//已经开启监听

private keys: Set<string> = new Set();

private upKeys: Set<string> = new Set();

private clearVisible = false;

private getKeysCallback?: (keys: string[]) => void

/**

* 获取keys

*/

public getKeys(callback: (keys: string[]) => void) {

this.getKeysCallback || (this.getKeysCallback = callback);

return [...this.keys]

}

/**

* 移除监听

*/

public removeListening() {

this.alreadyListen = false;

window.removeEventListener('keydown', this.keydown);

window.removeEventListener('keyup', this.keyup);

window.removeEventListener('blur', this.blur);

}

/**

* 开始监听

*/

public startListening() {

if (this.alreadyListen) return;

this.alreadyListen = true;

window.addEventListener('keydown', this.keydown);

window.addEventListener('keyup', this.keyup);

window.addEventListener('blur', this.blur);

}

/**

* 清空

*/

public clearKeys() {

this.keys.clear();

this.upKeys.clear();

this.getKeysCallback && this.getKeysCallback([...this.keys])

}

private setKeys(key: string) {

if (this.clearVisible) {

this.keys.clear();

this.clearVisible = false;

}

if (this.keys.has(key)) return

this.keys.add(key);

this.getKeysCallback && this.getKeysCallback([...this.keys])

}

private keydown = (e: KeyboardEvent) => {

if (!this.isAllowKey(e.keyCode)) return

this.setKeys(e.key);

}

private keyup = (e: KeyboardEvent) => {

if (!this.isAllowKey(e.keyCode)) return

this.upKeys.add(e.key);

if (this.upKeys.size == this.keys.size) {

this.clearVisible = true

this.upKeys.clear()

}

}

private blur = (e: FocusEvent) => {

this.clearVisible = true

}

// 是否允许

private isAllowKey(keycode: number) {

// let allowKeycode = new Set<number>([17, 16, 18])

// if (allowKeycode.has(keycode))return true;

if (keycode == 17 || keycode == 16 || keycode == 18) return true

if (keycode >= 65 && keycode <= 90) return true;

return false

}

}