起因
今天看到一个需求,要是使用Alt+A快捷键实现某个功能。
可以监听键盘的事件
keydown keyup keypress都可以监听键盘事件。
他们之间的区别在于:
- keypress只能捕捉单个字符
- keypress 可以捕获单个字符的大小写
- keypress 不区分小键盘和主键盘的数字字符
- keypress 不能监听alt、ctrl、enter、shift这些
- keydown keyup 可以捕获组合键
- keydown keyup 不能区分字母的大小写
- keydown keyup 区分小键盘和主键盘数字字符
监听单个键盘事键
// document.addEventListener('keydown',(e)=>{
// console.log(e);
// })
// document.addEventListener('keypress',(e)=>{
// console.log(e);
// })
document.addEventListener('keyup',(e)=>{
console.log(e);
})
监听两键组合事件
以Ctrl+C为例
document.addEventListener('keydown',(e)=>{
if(e.ctrlKey&&e.keyCode===67){
console.log('Ctrl+c');
}
})
当按下ctrl、alt、shift键时e对应的ctrlKey、altKey、shiftKey是为true的。Mac电脑的command键是metaKey
注意:这里只能是ctrl、alt、shift 加一个普通键。
普通两键或三键改如何判断呢
我的思路是:在指定时间内(比如300ms),如果按了某键,就将改键的key存入指定对象上。如果超时或者已经触发了,就将保存的对象还原。
然后判断对象上是否同时存在我们要监听的按键即可。
// 普通两键示例
let firstTime = 0
let doubleEvent = {}
document.addEventListener('keyup',(e)=>{
let currentTime = Date.now()
if(firstTime===0){
firstTime = currentTime
doubleEvent[e.key] = true
}else if(currentTime-firstTime>300){//超过300ms
firstTime = 0
doubleEvent = {}
}else{
doubleEvent[e.key] = true
}
if(doubleEvent.b&&doubleEvent.c){
console.log('b+c');
doubleEvent = {}
firstTime = 0
}
})
PS:有其他思路的大佬,可以指教一下。谢谢