在一些搜索框中，我们往往需要监听键盘的按下(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
@[email protected]=”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" @[email protected]="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>