在一些搜索框中,我们往往需要监听键盘的按下(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>