vue如何監聽鍵盤事件中的按鍵？

原文地址

---

背景

在一些搜索框中，我們往往需要監聽鍵盤的按下(onkeydown)或抬起(onkeyup)事件以進行一些操作。在原生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（下箭頭）

參考：JavaScript 獲取鍵盤事件(鍵盤某個按鍵被按下)

方案

在Vue中，已經為常用的按鍵設置了別名，這樣我們就無需再去匹配keyCode，直接使用別名就能監聽按鍵的事件。

<input @keyup.enter="function">

別名	實際鍵值
.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鍵)

另外，Vue中還支持組合寫法：

組合寫法	按鍵組合
@keyup.alt.67=”function”	Alt + C
@click.ctrl=”function”	Ctrl + Click

參考：vue 監聽鍵盤回車事件 @keyup.enter || @keyup.enter.native

注意

但是，如果是在自己封裝的組件或者是使用一些第三方的UI庫時，會發現並不起效果，這時就需要用到.native修飾符了，如：

<el-input
  v-model="inputName"
  placeholder="搜索你的文件"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

如果遇到.native修飾符也無效的情況，可能就需要用到$listeners了，具體用法請參考Vue官方文檔：將原生事件綁定到組件。

---

返回目錄