vue监听键盘事件的快捷方法【推荐】


Posted in Javascript onJuly 11, 2018

在我们的项目经常需要监听一些键盘事件来触发程序的执行,而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>

总结

以上所述是小编给大家介绍的vue监听键盘事件的快捷方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
javascript操作cookie
Jan 17 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue移动端实现红包雨效果
Jun 23 #Javascript
vue实现学生录入系统之添加删除功能
Jul 11 #Javascript
微信小程序实现红包雨功能
Jul 11 #Javascript
小程序ios音频播放没声音问题的解决
Jul 11 #Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 #Javascript
微信小程序实现发红包功能
Jul 11 #Javascript
vue框架搭建之axios使用教程
Jul 11 #Javascript
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
目前最全的python的就业方向
2018/06/05 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
市场营销个人求职信范文
2014/02/02 职场文书
二年级评语大全
2014/04/23 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
党的生日演讲稿
2014/09/10 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
财产分割协议书
2016/03/22 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python