Vue中Alt键组合检测失效,event.altKey总是false怎么办?
我在用Vue做一个输入框的快捷键功能,想用Alt+Enter切换输入模式。但发现无论怎么按Alt键,event.altKey都返回false。代码里绑定了keydown事件,还试过加.prevent修饰符,但输入框还是会被浏览器默认行为选中?
export default {
methods: {
handleKey(event) {
if (event.altKey && event.key === 'Enter') {
console.log('Alt+Enter detected!')
}
}
}
}
奇怪的是单独按Alt键时控制台没反应,按Enter时又能阻止换行。是不是事件绑定的位置有问题?或者Vue对组合键有什么特殊处理方式?
先说解决方案,你可以试试监听keypress事件而不是keydown,虽然现在这两个事件在现代浏览器里区别不大,但有时候keypress对组合键的检测会更稳定一些。如果还是不行,可以换个思路,用keyup事件来处理,因为keyup不会受到浏览器默认行为的干扰。
代码上稍微改一下,像这样:
这里我把事件绑定到window上,而不是直接绑在输入框。因为输入框可能会有奇怪的默认行为,尤其是在Alt键被按下时。另外,别忘了加event.preventDefault(),否则浏览器可能会抢走你的事件。
如果你还是遇到问题,可能是某些特定浏览器的怪癖。比如某些浏览器对Alt键的处理比较特殊,这种情况下你可以试试用Ctrl或者Shift替代Alt,看看是不是逻辑本身的问题。
最后提醒一句,调试快捷键功能的时候,记得检查有没有其他全局快捷键冲突,比如操作系统的快捷键,这个也挺常见的。