22. Vue keycodes按键修饰符
需求
在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup
事件,并且还要使用按键修饰符来指定按下的键盘按钮。
下面来看看另一个需求来逐步认识一下按钮修饰符。
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on
在监听键盘事件时添加按键修饰符:
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
你可以直接将 KeyboardEvent.key
暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中,处理函数只会在 $event.key
等于 PageDown
时被调用。
下面来完成一下列表操作中的数据添加操作,如下:
这时候只要按下键盘的enter
按钮,那么则会执行add
方法,执行添加数据,如下:
除了enter
这个常用的按键码,还有更多的按键我们需要知道的,如下。
按键码
keyCode
的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode
attribute 也是允许的:
<input v-on:keyup.13="submit">
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
有一些按键 (.esc
以及所有的方向键) 在 IE9 中有不同的 key
值, 如果你想支持 IE9,这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes
对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
自定义按键修饰符别名
对于一些上面112
这样难以记住的按键符号,可以通过自定义别名来进行记录。
keyCodes
类型:
{ [key: string]: number | Array<number> }
默认值:
{}
用法:
Vue.config.keyCodes = {v: 86,f1: 112,// camelCase 不可用mediaPlayPause: 179,// 取而代之的是 kebab-case 且用双引号括起来"media-play-pause": 179,up: [38, 87] }
<input type="text" @keyup.media-play-pause="method">
给
v-on
自定义键位别名。
对f2按钮自定义按钮修饰符
// 自定义按键修饰符Vue.config.keyCodes = {f2: 113,};
上面设置好了f2
按钮的别名之后,下面给监听事件设置修饰符即可,如下:
浏览器显示如下:
更多的按键码说明
在上面我们知道了113
是f2
的按键码,那么还有更多的按键码呢?可以看下面的篇章查询。
js keycode键盘码
22. Vue keycodes按键修饰符相关推荐
- Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表 按键 键码 8 BackSpace 9 Tab 12 Clear 13 Enter 16 Shift 17 Ctrl 18 Alt 19 Pause 20 Caps_L ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head&g ...
- Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
- vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
- 五、伊森商城 前端基础-Vue v-on 事件修饰符 按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
- 01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- Vue按键修饰符:@keyup.enter
事件keyup是按键抬起事件,就是当按键抬起触发: keyup后面加上按键修饰符可以指定抬起某个按键再触发事件: 每一个按键都有一个keyCode,比如"Enter"回车键的key ...
- vue 事件修饰符与按键修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
- vue 事件修饰符 按键修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播 即阻止了事件冒泡, ...
最新文章
- java初始化实例化_Java对象的创建过程:类的初始化与实例化
- Shell脚本文件操作
- arraylist 初始化_Java二维数组和动态数组ArrayList 类
- matplotlib 多子图的画法 - 设置坐标范围 - 设置坐标的显示间隔 - 设置figure的大标题 - 设置x轴和y轴的名称 - df.groupby
- Go 语言中的 new() 和 make()的区别
- jmeter(四十五)常用Beanshell脚本
- qt-embedded-linux-opensource-src-4.5.3移植到s3c6410
- android jni示例_Android服务示例
- BZOJ2948 : [Poi2001]绿色游戏
- mysql查询不超过19_mysql45讲 19.为什么我只查一行的语句,也执行这么慢?
- PHPSHE 1.7前台SQL注入漏洞分析
- Hive中Join的 MR 底层原理
- TEM:基于树模型构建可解释性推荐系统
- 新手程序员必读的十本书
- python开发酷q插件gui_酷Q机器人插件开发笔记
- thinkphp5 TP5 两表关联查询
- 每周写周报每天写总结
- 一些方便的LaTex在线编辑工具
- 如何在Ubuntu 上安装SEP for Linux
- 社招面试会遇到哪些坑?