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对表单操作2
Apr 06 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Python中对列表排序实例
2015/01/04 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python查看数据类型的方法
2019/10/12 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Python3 元组tuple入门基础
2020/02/09 Python
python和js交互调用的方法
2020/06/23 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
大学生实习思想汇报
2014/01/12 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
网络舆情信息简报
2015/07/21 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android