vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
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的更多相关文章
- Vue监听键盘回车事件
在写页面时遇见了登录页需要加一个键盘回车事件. vue 的 v-on中有这样的修饰符 <input v-on:keyup.enter="submit"> 即<in ...
- js及vue监听键盘回车事件
js document.onkeydown = (event) => { var e = event || window.event; if(e && e.keyCode==13 ...
- 如何在ArcMap中监听键盘鼠标事件(转)
如何在ArcMap中监听键盘鼠标事件(转) Link: http://www.cnblogs.com/dyllove98/p/3155551.html 昨天有个朋友想要实现一个功能,就是在ArcMap ...
- 如何在ArcMap中监听键盘鼠标事件
昨天有个朋友想要实现一个功能,就是在ArcMap中编辑数据的时候,能够通过快捷键自动设置预定义的属性,比如,选中若干要素,按A键,就自动填充属性,按B键,则又自动填充另外的属性字段. 单就这个功能而言 ...
- vue在某页面监听键盘输入事件
需求:在某一网页,通过上下左右键控制一些操作 实现: 1.基本代码: 因为没有绑定特定的元素.所以我们将事件绑定到document上. //当前页面监视键盘输入 document.onkeydown ...
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- Winform下WebBrowser 编辑模式 监听键盘按键事件
最近使用 WebBrowser 做了个富文本编辑器(其实网上有很多很多).例如下面这个玩意(不要在意界面神马的) WebBrowser在编辑模式下可以有一些HTML标签的功能,改变字体大小颜色等等等. ...
- js监听键盘回车
//监听回车 $(document).keydown(function(e) { ) { $("#btnLogin").click(); } }) //input绑定回车 $('# ...
- js监听键盘方向键事件
<SCRIPT language=javascript> document.onkeydown = chang_page; function chang_page() { || ) loc ...
随机推荐
- 1.CentOS 7 vs CentOS 6的不同
CentOS 7 vs CentOS 6的不同(1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell) (2)文件系统[CentOS6] ...
- MyBatis 源码篇-SQL 执行的流程
本章通过一个简单的例子,来了解 MyBatis 执行一条 SQL 语句的大致过程是怎样的. 案例代码如下所示: public class MybatisTest { @Test public void ...
- dev gridview 视图层级
表格对象继承的关系
- LeetCode 腾讯精选50题--只出现一次数字
事先说明,如果不是评论区的大牛一语点破,我可能还会陷在死胡同里出不来,这道题其实很简单,利用了任何一个学过二进制的人都了解的定理,即: 1. 异或操作满足交换律 : a ^ b ^ c 等价于 a ^ ...
- C#/.net中出现 "GDI+中发生一般性错误"解决方案
有时我们在读取本地图片,调用 Image.Save() 方法,将其另保存为其他格式时,经常会碰到一个错误:“GDI+中发生一般性错误”:一般出现这种错误有 3 种可能: 1.保存路径不存在或者错误: ...
- elementui-插槽
<el-table-column label="操作"> <template slot-scope="scope"> <el-bu ...
- Linux学习(五)-Linux组管理和权限管理
Linux组基本介绍 在Linux中的每一个用户必须属于一个组,不能独立与组外.在Linux中每个文件有所有者,所在组,其他组的概念 所有者 所在组 其它组 改变用户所在组 1.文件/目录 所有者 文 ...
- H5存储方式
数据存储 var arr = [0, 1, 1, 1]; //存储,IE6~7 cookie 其他浏览器HTML5本地存储 if (window.localStorage) { localStorag ...
- 5.AOP配置与应用(annotation的方式)
步骤: a)在beans.xml文件中加上对应的xsd文件 spring-aop.xsd b)加上<aop:aspectj-autoproxy>,使用aspectj来完成aop <! ...
- Oracle权限管理详解(2)
详见:https://blog.csdn.net/u013412772/article/details/52733050 Oracle数据库推荐以引用博客: http: http:.html http ...