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中的View-Model使用介绍
Aug 11 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
浅析TypeScript 命名空间
Mar 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
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php短信接口代码
2016/05/13 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
django如何通过类视图使用装饰器
2019/07/24 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
如何编写python的daemon程序
2021/01/07 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
大学生职业规划论文
2014/01/11 职场文书
党员活动日总结
2014/05/05 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
教师节感谢信
2015/01/22 职场文书
社区元宵节活动总结
2015/02/06 职场文书
个人优缺点总结
2015/02/28 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书