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