Open jtwang7 opened 2 years ago
参考文章:
❎ 问题描述
<el-button type="success" @keyup.enter="gomain()">登录</el-button>
代码如上,在使用 el-button 时,发现监听 keyup 的 enter 事件时,监听无效,后来查阅资料才发现要元素处于 focus 时才可以触发,如果按钮没有被选择,Enter 按钮时没有用。
el-button
✅ 解决方案 通过 js 原生事件解决:把监听事件绑在document上
//添加监听回车按键 created() { var _this = this; document.addEventListener("keydown", _this.watchEnter); }, destroyed() { //移除监听回车按键 var _this = this; document.removeEventListener("keydown", _this.watchEnter); }, methods:{ //监听回车按钮事件 watchEnter(e) { var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值 //判断如果用户按下了回车键(keycody=13) if (keyNum == 13) { 按下回车按钮要做的事 } }, }
✅ 补充 js 原生监听组合按键的方法 参考:JS之组合键监听Ctrl/Shift...
🔆 首先我们打印 keyxxx 事件的 event 对象
keyxxx
document.onkeydown = (e) => { console.log(e) }
可以发现 event 对象中包含有 ctrlKey, shiftKey, altKey, metaKey 这些字段。这些字段就是原生 js 的组合键设置方式。
🔆 当我们按下 ctrl 键时,ctrlKey 字段就会变为 true,因此可以有如下 js 原生组合键书写方式。
document.onkeydown = (e) => { // 判断按下了 ctrl 并且同时按下了某个 key if(e.ctrlKey === true && e.key === 'q') { return alert('按下了ctrl+q键') } }
Vue 键盘事件监听无效
参考文章:
❎ 问题描述
代码如上,在使用
el-button
时,发现监听 keyup 的 enter 事件时,监听无效,后来查阅资料才发现要元素处于 focus 时才可以触发,如果按钮没有被选择,Enter 按钮时没有用。✅ 解决方案 通过 js 原生事件解决:把监听事件绑在document上
✅ 补充 js 原生监听组合按键的方法 参考:JS之组合键监听Ctrl/Shift...
🔆 首先我们打印
keyxxx
事件的 event 对象可以发现 event 对象中包含有 ctrlKey, shiftKey, altKey, metaKey 这些字段。这些字段就是原生 js 的组合键设置方式。
🔆 当我们按下 ctrl 键时,ctrlKey 字段就会变为 true,因此可以有如下 js 原生组合键书写方式。