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()）獲得