其他分享
首页 > 其他分享> > vue按键修饰符详解

vue按键修饰符详解

作者:互联网

按键修饰符

基本介绍

按键修饰符

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

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

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

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

键码值

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

全部按键键码值

常用控制键键码值

在这里插入图片描述

语法

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

案例

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

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

按键键码值别名
Enter13.enter
Tab9.tab
Delete46.delete (捕获“删除”和“退格”按键)
Esc27.esc
BackSpace8.space
Up Arrow38.up
Left Arrow37.left
Right Arrow39.right
Dw Arrow40.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事件,是可以的,它们是通过不同的键触发的。

标签:触发,vue,键码,修饰符,键盘,详解,事件,按键
来源: https://blog.csdn.net/jyn15159/article/details/111603998