在一些搜索框中，我們往往需要監聽鍵盤的按下(onkeydown)或抬起(onkeyup)事件以進行一些操作。
在原生js或者jQuery中，我們需要判斷e.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（下箭頭）
按鍵碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>按鍵碼</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> input { display: block; margin: 10px; } </style> <body> <div id="app"> <!-- 只有在 keyCode 是 13 時調用 app.listener() --> <input v-on:keyup.13="listener($event, 'Enter1')" placeholder="Enter1"> <!-- 同上 --> <input v-on:keyup.enter="listener($event, 'Enter2')" placeholder="Enter2"> <!-- 縮寫語法 --> <input @keyup.enter="listener($event, 'Enter3')" placeholder="Enter3"> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: {}, methods: { listener: function(e, msg) { const current = e.currentTarget.nodeName console.log(`${current} ${msg}`) }, }, }); </script>
修飾符
Vue 提供了絕大多數常用的按鍵碼的別名，允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
別名 實際鍵值
.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
@keyup.ctrl.c=”function” Ctrl + C
@keyup.ctrl.c+@keyup.c=”function” Ctrl + C
修飾符示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>修飾符</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> input { display: block; margin: 10px; } </style> <body> <div id="app"> <!-- 組合鍵示例 --> <!-- 按Ctrl + 任意鍵 --> <input @keyup.ctrl="listener($event, 'Ctrl+任意鍵')" placeholder="Ctrl+任意鍵"> <!-- 按Ctrl + C --> <input @keyup.ctrl.67="listener($event, 'Ctrl+C')" placeholder="Ctrl+C"> <input type="button" @keyup.ctrl.c="listener($event, 'Ctrl+C')" value="Ctrl+c"> <input type="button" @keyup.ctrl+@keyup.c="listener($event, 'Ctrl+C')" value="Ctrl+c"> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: {}, methods: { listener: function(e, msg) { const current = e.currentTarget.nodeName console.log(`${current} ${msg}`) }, }, }); </script>
與按鍵別名不同的是，修飾鍵和 keyup 事件一起用時，事件引發時必須按下正常的按鍵。換一種說法：如果要引發 keyup.ctrl，必須按下 ctrl 時釋放其他的按鍵；單單釋放 ctrl 不會引發事件。
.native
注意！！！如果用了封裝組件的話，比如element，這個時候使用按鍵修飾符需要加上.native覆蓋原有封裝的keyup事件即可
比如：
<el-input v-model="account" placeholder="請輸入賬號" @keyup.enter.native="search()"></el-input>
可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽
2.5.0 新增 .exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>.exact修飾符</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> button { display: block; margin: 10px; } </style> <body> <div id="app"> <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button v-on:click.ctrl="listener($event, '1')">即使 Alt 或 Shift 被一同按下時也會觸發</button> <!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button v-on:click.ctrl.exact="listener($event, '2')">有且只有 Ctrl 被按下的時候才觸發</button> <!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button v-on:click.exact="listener($event, '3')">沒有任何系統修飾符被按下的時候才觸發</button> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: {}, methods: { listener: function(e, msg) { const current = e.currentTarget.nodeName console.log(`${current} ${msg}`) }, }, }); </script>
鼠標按鈕修飾符
.left 點擊鼠標左鍵即可觸發事件
.right 點擊鼠標右鍵即可觸發事件
.middle 按下滑輪觸發事件
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>鼠標按鈕修飾符</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> button { display: block; margin: 10px; } </style> <body> <div id="app"> <!-- 點擊鼠標左鍵即可觸發事件 --> <button v-on:click.left="listener($event, 'left')">點擊鼠標左鍵即可觸發事件</button> <!-- 點擊鼠標右鍵即可觸發事件 --> <button v-on:click.right="listener($event, 'right')">點擊鼠標右鍵即可觸發事件</button> <!-- 按下滑輪觸發事件 --> <button v-on:click.middle="listener($event, 'middles')">按下滑輪觸發事件</button> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: {}, methods: { listener: function(e, msg) { const current = e.currentTarget.nodeName console.log(`${current} ${msg}`) }, }, }); </script>