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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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
url decode problem 解决方法
2011/12/26 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP 中常量的知识整理
2017/04/14 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python最长回文串算法
2018/06/04 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
学习演讲稿范文
2014/05/10 职场文书
中考标语大全
2014/06/05 职场文书
环境科学专业求职信
2014/08/04 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
初中作文评语集锦
2014/12/25 职场文书
2015年度党员个人总结
2015/02/14 职场文书
写给老师的保证书
2015/05/09 职场文书
Python上下文管理器Content Manager
2021/06/26 Python