vue 项目中使用键盘回车或空格按键触发事件

话不多说上代码!!!

一开始以为很复杂,经过一番摸索和查找,发现也没有那么难,具体如下:

1、先在 created 里边开启键盘按键的监听事件,如下:

created() {
    window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
},

2、在 methods 里边添加按键之后需要执行的方法即可,具体如下:

methods:{
    // 回车和空格键提交右侧信息
    handkeyCode(e) {
       console.log(e); // 打印出按键后的信息
       if(e.keyCode === 13 || e.keyCode === 32){
           console.log('触发了回车/空格键');
       }
    },
}

解析:e.keyCode 是每个按键的编码,13是回车键,32是空格键

至此完成键盘按键触发事件的方法

测试有效!!!

猜你喜欢

转载自blog.csdn.net/qq_38543537/article/details/128200472
今日推荐