在很多时候,我们想要在键盘上按一个指定的键,实现,新增,删除的目的,比如按一下回车键,就要实现新增数据的目的
这样我们就需要监听键盘事件。比如 keydown:按键按下,keyup:按键抬起,keypress:按键按下抬起
在Vue中允许为 v-on
在监听键盘事件时添加按键修饰符:
<!-- 只有在 `keyCode` 是 13 时调用 `vm实例中的submit方法` 这个13对应的键其实就是Enter回车键-->
<input v-on:keyup.13="submit">
记住所有的 keyCode
比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上:这个enter就是键盘码13的别名 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
Vue默认为我们提供了如下键盘码的别名:
.enter(回车键)
.tab(Tab键)
.delete
(捕获“删除”和“退格”键).esc(Esc按键)
.space(空格键)
.up(方向上键)
.down(方向下键)
.left(方向左键)
.right(方向右键)
案例:
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--当空格键按下并已经抬起的时候,调用add方法-->
Esc键<input type="text" v-model="name" v-on:keyup.esc="add(name)" />
<!--esc是键盘码27的别名,所有可以下面直接用键盘码27 效果样-->
Esc键<input type="text" v-model="name" v-on:keyup.27="add(name)" />
<!--当Del键按下的时候,调用Del方法-->
Del键<input type="text" v-model="name" v-on:keydown.delete="Del(name)" />
<!--当空格键按下并即将抬起的时候,调用add方法-->
<!--keypress对中文输入法支持不好,可能无法响应中文输入;无法响应系统功能键(如delete,backspace等等)-->
<!--经过测试:keypress无法绑定 Esc,方向键,Tab键,Del键-->
<!--keypres对space空格键支持,因为空格键不属于系统功能键-->
空格键<input type="text" v-model="name" v-on:keypress.space="add(name)" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: '',
},
methods: {
add: function (name) { alert(name) },
Del: function (name) { alert(name) }
},
filters: {
}
})
</script>
</body>
</html>
如果对Vue提供的键盘码别名觉得不够用,我们可以直接用按键事件来绑定键盘码keyCode。但是键盘码keyCode全是数字,很难记,也不直观。所以我们还可以给键盘码自定义的设定别名。
案例:例如,我为113这个键盘码起个别名,例如叫F2
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--当F2键按下并抬起后,触发add事件方法-->
自定义按键F2<input type="text" v-model="name" v-on:keyup.F2="add(name)" />
</div>
<script>
//自定义全局键盘码别名(自己定义全局按键修饰符)
Vue.config.keyCodes.F2 = 113;
var vm = new Vue({
el: "#app",
data: {
name: '',
},
methods: {
add: function (name) { alert(name) },
},
filters: {
}
})
</script>
</body>
</html>