前端使用原生js实现全局快捷键功能
目录
前言
有很多地方都需要快捷键的功能,比如在页面或者各种软件当中;当各种快捷键快捷键都不好使时就可以试试用原生js来实现快捷键的功能,实现思路主要就是使用document.onkeydown来监听键盘事件并作出对应的处理。
一、监听键盘事件
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;
总结
可以利用监听键盘事件实现快捷键,总体思路
设置快捷键:利用监听组合键,得到快捷键,然后做持久化存储,可以使用store或者localStorage或者直接保存到服务器。
监听快捷键:从本地拿到快捷键,然后做处理。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfhghb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01