keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。
keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。
keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。

  1. 在mounted中加上window.addEventListener(“keydown”, this.KeyDown);监听
mounted() {
window.addEventListener("keydown", this.KeyDown);
}
  1. 在methods中写上KeyDown函数
 methods: {
      KeyDown(event) {
      const e = event || window.event || arguments.callee.caller.arguments[0];
      let key = e.keyCode;		//键盘码值 keycode
        if (key == 37) { //左
       	  console.log("left");
        } else if(key == 38) {	//上
          console.log("up");
        } else if(key == 39) {	//右
          console.log("right");
        } else if(key == 40) {	//下
       	  console.log("down");
        }
    },
}
  1. 键盘常用键的keyCode值
键位keyCode
0-948-57
a到z(A到Z)65到90
F1到F24112到135
BackSpace(退格)8
Tab9
Enter(回车)13
Caps_Lock(大写锁定)20
Space(空格键)32
Left(左箭头)37
Up(上箭头)38
Right(右箭头)39
Down(下箭头)40

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

Logo

前往低代码交流专区

更多推荐