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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
jQuery事件详解
Feb 23 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 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新手上路(十)
2006/10/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python的print用法示例
2014/02/11 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Python调用C语言的实现
2019/07/26 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
Java多态性的定义以及类型
2014/09/16 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
小学教师自我鉴定
2013/11/07 职场文书
架构师岗位职责
2013/11/18 职场文书
门诊手术室工作制度
2014/01/30 职场文书
采购部部长岗位职责
2014/02/06 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
实验室安全管理制度
2015/08/05 职场文书
员工升职自我评价
2019/03/26 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python