vue按键修饰符详解

按键修饰符

基本介绍

按键修饰符：

使得键盘事件只针对某个(或某几个)按键生效。

应用中有许多键盘事件 (onkeyup、onkeydown、onkeypress、oninput等等)，每个事件在执行的时候可以通过许多按键达成，有时要求只有按到某个按键时，才激活该事件。

例如只有触碰回车键或ESC键才有效果，那么可以通过 按键修饰符 实现。

按键	描述
oninput	触碰键盘，给输入框做输入动作时会触发执行
onkeyup	键盘抬起触发执行
onkeypress	按下任何字母数字键时触发执行，系统按钮（例如，箭头键和功能键）无法得到识别
onkeydown	按下任何键盘键（包括系统按钮，如箭头键和功能键）时触发执行

键码值：

键盘每个按键都对应一个数字码，称为键码值。event.keyCode 可以获取到。

全部按键键码值

常用控制键键码值：

语法：

<input  @keyup.键码值/别名="处理">

案例：

<!--要求只有触碰回车键，才执行该事件-->
<input  @keyup.13="处理">  <!--键码值-->
<input  @keyup.enter="处理">  <!--别名-->

vue考虑到键码值使用多有不便，已经给常用键码值(event.keyCode)设置了别名。

按键	键码值	别名
Enter	13	.enter
Tab	9	.tab
Delete	46	.delete (捕获“删除”和“退格”按键)
Esc	27	.esc
BackSpace	8	.space
Up Arrow	38	.up
Left Arrow	37	.left
Right Arrow	39	.right
Dw Arrow	40	.down

自定义其他的按键别名：

// 要求使用  @keyup.f6
Vue.config.keyCodes.f6 = 118
<input @keyup.f6="xxx" />  // 只有单击f6键才会触发xxx的回调

注意：如果有的需求比较特殊，需要多个按键一并触发该事件，也是可以的：

​ @keyup.ctrl.enter="XXX" 表示 ctrl和enter一并触碰，才触发事件执行。

案例应用

给添加品牌的输入框设置按键修饰符：

1. 回车键 被触碰就添加新品牌。
2. ESC键 被触碰就把已经输入的新品牌给做清除操作，取消添加。

<input type="text" v-model="newbrand" 
       @keyup.enter="add" 
       @keyup.esc="newbrand=''" />

注意：一个input输入框设置了两个keyup事件，是可以的，它们是通过不同的键触发的。