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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
node.js实现爬虫教程
Aug 25 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
js中的面向对象入门
Mar 06 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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服务器实现多session并发运行
2006/10/09 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
体育教师自我鉴定
2014/02/12 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
民政局未婚证明
2015/06/15 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL