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制作的产品广告效果
Dec 08 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
使用phpQuery采集网页的方法
2013/11/13 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
php简单的上传类分享
2016/05/15 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python运算符重载用法实例分析
2015/06/01 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
干部现实表现材料
2014/02/13 职场文书
整改通知书
2015/04/20 职场文书
培训班开班主持词
2015/07/02 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
HttpClient实现文件上传功能
2022/08/14 Java/Android