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 API学Jquery 之二 属性
Apr 09 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
拖动时防止选中
Feb 03 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
js打造数组转json函数
2015/01/14 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
python相似模块用例
2016/03/04 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
外贸业务员岗位职责
2013/11/24 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server