vue 鍵盤事件的應用
阿新 • • 發佈：2019-01-10
在原生js或者jQuery中，我們需要判斷e.keyCode的值來獲取使用者所按的鍵。這樣就存在一個問題：我們必須知道某個按鍵的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（下箭頭） |
在Vue中，已經為常用的按鍵設定了別名，這樣我們就無需再去匹配keyCode，直接使用別名就能監聽按鍵的事件。
原生元件使用鍵盤事件
| <input @keyup.enter="submit"> |
鍵盤 別名
| 別名 | 實際鍵值 |
| .delete | delete（刪除）/BackSpace（退格） |
| .tab | Tab |
| .enter | Enter（回車） |
| .esc | Esc（退出） |
| .space | Space（空格鍵） |
| .left | Left（左箭頭） |
| .up | Up（上箭頭） |
| .right | Right（右箭頭） |
| .down | Down（下箭頭） |
| .ctrl | Ctrl |
| .alt | Alt |
| .shift | Shift |
| .meta | (window系統下是window鍵，mac下是command鍵) |
注意
如果是在自己封裝的元件或者是使用一些第三方的UI庫時，會發現並不起效果，這時就需要用到.native修飾符了，如：
<el-input style="width: 420px;text-align:center;padding-left: 36px" type="password"
v-model="loginForm.password"
placeholder="密碼"
@keyup.enter.native="login"></el-input>如果遇到.native修飾符也無效的情況，可能就需要用到$listeners了，具體用法請參考Vue官方文件：將原生事件繫結到元件。