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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
javascript时间函数大全
Jun 30 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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调用Webservice实例代码
2011/07/29 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python返回数组/List长度的实例
2018/06/23 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python global和nonlocal用法解析
2020/02/03 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
逃课上网检讨书
2014/02/20 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
汇报材料怎么写
2014/12/30 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书