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中汉字显示乱码问题(已解决)
Dec 27 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
javascript getElementsByTagName
Jan 31 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
javascript清空table表格的方法
May 14 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 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原创论坛
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
React实现全选功能
2020/08/25 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python3调用R的示例代码
2018/02/23 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
竞选宣传委员演讲稿
2014/05/24 职场文书
学校志愿者活动总结
2014/06/27 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
小学音乐课教学反思
2016/02/18 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android