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一并触碰,才触发事件执行。
案例应用
给添加品牌的输入框设置按键修饰符:
- 回车键 被触碰就添加新品牌。
- ESC键 被触碰就把已经输入的新品牌给做清除操作,取消添加。
<input type="text" v-model="newbrand"
@keyup.enter="add"
@keyup.esc="newbrand=''" />
注意:一个input输入框设置了两个keyup事件,是可以的,它们是通过不同的键触发的。
标签:触发,vue,键码,修饰符,键盘,详解,事件,按键 来源: https://blog.csdn.net/jyn15159/article/details/111603998