在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 |