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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
js实现简单锁屏功能实例
May 27 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
Terran历史背景
2020/03/14 星际争霸
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php xml-rpc远程调用
2008/12/19 PHP
php 正则匹配函数体
2009/08/25 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
php compact 通过变量创建数组
2016/11/15 PHP
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
angular分页指令操作
2017/01/09 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python抽象类的新写法
2015/06/18 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
成人大专生实习期的自我评价
2013/10/02 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
企业宣传方案
2014/03/04 职场文书
2015年环保局工作总结
2015/05/22 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
JS实现九宫格拼图游戏
2022/06/28 Javascript