vue 键盘操作事件

摘要：当按键盘enter键和键盘左右键时，左右切换页面卡片并读取卡片上的信息,Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 等浏览器使用 event.which

需求：

当按键盘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()）获得

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_9332