Vue中键盘快捷键-JS键盘事件

最新推荐文章于 2024-07-05 13:52:09 发布

呆。@473

最新推荐文章于 2024-07-05 13:52:09 发布

阅读量1.9k

点赞数

分类专栏： vue js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_60382322/article/details/122276756

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

在Vue.js项目中，可以通过监听keydown事件来实现键盘快捷键功能。在main.js中全局注册键盘事件处理函数，然后在组件的mounted生命周期钩子中调用此函数，传递当前组件实例。根据键盘按键的keyCode值，可以执行相应的方法，例如按键1和2分别触发不同的操作。此外，了解常见键盘按键的keyCode值对于事件处理至关重要。

摘要由CSDN通过智能技术生成

在VUE中键盘快捷键-JS键盘事件

键盘事件

在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：
keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

当获取用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。

在vue项目中监听键盘事件–keydown

1、在main.js文件中加入

Vue.prototype.$keyBoard = function(vm) {
    document.onkeydown = function() {
        let key = window.event.keyCode;//keyCode键盘码值
        //当按下键盘1时，执行有参函数keydown(1, 0),这里的函数keydown按自己的需求更改
        if (key == 49) { //1 ->键盘按键 1
            vm.keydown(1, 0);//keydown是自定义方法。按键触发
        }
        if (key == 50) { //2 ->键盘按键 2
            vm.keydown(2, 1);
        }

2、在需要监听键盘事件的组件里的mounted 生命周期内写入：

mounted() {
this.$keyBoard(this);
}

3、在组件中定义被键盘事件触发的方法：

methods: {
//测试方法：
keydown(num, index) {
	  alert('111');
	  console.log(num);
	  console.log(index);
    },
}

键盘常用键的keyCode值

键位	keyCode
0-9	48-57
a到z（A到Z）	65到90
F1到F24	112到135
BackSpace（退格）	8
Tab	9
Enter（回车）	13
Caps_Lock（大写锁定）	20
Space（空格键）	32
Left（左箭头）	37
Up（上箭头）	38
Right（右箭头）	39
Down（下箭头）	40