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给元素添加/删除节点比如select
Apr 02 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
原生js实现弹窗消息动画
Nov 20 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
python相对企业语言优势在哪
2020/06/12 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
给民警的表扬信
2014/01/08 职场文书
正规欠条模板
2015/07/03 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Mysql开启外网访问
2022/05/15 MySQL
mysql数据库隔离级别详解
2022/06/16 MySQL