需求：当按键盘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()）获得
1.《vue 键盘操作事件》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《vue 键盘操作事件》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/26512.html