vue的监听键盘事件的快捷方法
2024-08-29 00:44:09
在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符:
<input v-on:keyup.13="submit">
对于一些常用键,还提供了按键别名:
<input @keyup.enter="submit"> <!-- 缩写形式 -->
全部的按键别名:
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
修饰键:
- .ctrl
- .alt
- .shift
- .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
与按键别名不同的是,修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发事件。
<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear"> <!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other"> <!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">
对于elementUI的input,我们需要在后面加上.native, 因为elementUI对input进行了封装,原生的事件不起作用。
<input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>
最新文章
- Oracle巡检脚本:ORAWatcher.sh
- mmysql-最大链接数和最大并发数的区别
- .NET面试题解析(02)-拆箱与装箱
- LoadRunner 12 发布,主推云
- hdu1213 How Many Tables
- git ignore 的使用
- 4x4矩阵键盘扫描
- Jetty:配置JSP支持
- linux服务器的操作禁忌
- 同步、异步、阻塞、非阻塞IO
- InnoDB关键特性之change buffer
- 【eclipse】mybatis配置文件创建与mapper接口文件创建
- Curator框架基础使用
- href=#与href=javascript:void(0)的区别
- DRBD详细解说及配置过程记录
- linux 二级域名设置
- 关于BOARD_SYSTEMIMAGE_PARTITION_SIZE【转】
- docker容器启动参数
- iOS 循环引用 委托 (实例说明)
- CentOS 7 Install Gitlab CE