vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native


Posted in Javascript onAugust 25, 2018

vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:

<input v-on:keyup.13="submit">

vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~

上面代码,还可以在这样写:

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

全部的键盘别名:

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

还有一些组合按键:

.ctrl

.alt

.shift

.meta(window系统下是window键,mac下是command键)

Alt + C :

<input @keyup.alt.67="doSth">

Ctrl + Click :

<div @click.ctrl="doSth">点我</div>

注意!!!如果用了封装组件的话,比如element,这个时候使用按键修饰符需要加上.native

比如:

<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>

以上这篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
Bootstrap基础学习
Jun 16 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
js实现转动骰子模型
Oct 24 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 #Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
php文件上传的两种实现方法
2016/04/04 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python如何实现定时器功能
2020/05/28 Python
美国电视购物:QVC
2017/02/06 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
如何提高SQL Server的安全性
2016/07/25 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
村委会贫困证明
2014/01/14 职场文书
房展策划方案
2014/06/07 职场文书
个人委托书
2014/07/31 职场文书
语文教师个人工作总结
2015/02/06 职场文书
7个关于Python的经典基础案例
2021/11/07 Python