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利用div背景,做一个竖线的效果。
Nov 22 Javascript
Seajs的学习笔记
Mar 04 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
用header 发送cookie的php代码
2007/03/16 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
javascript call和apply方法
2008/11/24 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
web页面录屏实现
2019/02/12 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
小学教研工作制度
2014/01/15 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
荆州古城导游词
2015/02/06 职场文书
Python中异常处理用法
2021/11/27 Python