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数组使用调用方法汇总
Dec 08 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
微信小程序入门教程
Nov 18 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
详解JavaScript执行模型
Nov 16 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 启动时报错的简单解决方法
2014/01/27 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php处理复杂xml数据示例
2016/07/11 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python 多个参数不为空校验方法
2019/02/14 Python
python 生成器需注意的小问题
2020/09/29 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
机电一体化应届生求职信
2014/08/09 职场文书
无罪辩护词范文
2015/05/21 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python