按键修饰符
基本介绍
按键修饰符：
使得键盘事件只针对某个(或某几个)按键生效。
应用中有许多键盘事件 (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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。