vue 键盘操作事件

需求：

当按键盘enter键和键盘左右键时，左右切换页面卡片并读取卡片上的信息

一、获取键盘对应的keycode

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

二、绑定键盘事件方法

属性	值	描述
onkeydown	script	当按下按键时运行脚本
onkeypress	script	当按下并松开按键时运行脚本
onkeyup	script	当松开按键时运行脚本

这里绑定keyup方法，@keyup.native

<el-input-number
     v-model="item.dose"
     size="mini"
    :min="1"
    :max="9999"
    ref="inputNum"
    @keyup.native="handlerKeyChange($event,index)"
    controls-position="right"
 >
 </el-input-number>

// 绑定并添加对应方法
handlerKeyChange($ev){
  if($ev.keyCode === 13 || $ev.keyCode === 39){
    console.log('跳到下一个')
  }
  if($ev.keyCode === 37){
    console.log('跳到上一个')
  }
  ...
}

 

注意：

1、Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 等浏览器使用 event.which

2、 获得 Unicode 编码值之后，如果需要得到实际对应的按键值，可以通过 Srting 对象的 fromCharCode 方法（String.fromCharCode()）获得

vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com