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的更多相关文章

  1. Vue监听键盘回车事件

    在写页面时遇见了登录页需要加一个键盘回车事件. vue 的 v-on中有这样的修饰符 <input v-on:keyup.enter="submit"> 即<in ...

  2. js及vue监听键盘回车事件

    js document.onkeydown = (event) => { var e = event || window.event; if(e && e.keyCode==13 ...

  3. 如何在ArcMap中监听键盘鼠标事件(转)

    如何在ArcMap中监听键盘鼠标事件(转) Link: http://www.cnblogs.com/dyllove98/p/3155551.html 昨天有个朋友想要实现一个功能,就是在ArcMap ...

  4. 如何在ArcMap中监听键盘鼠标事件

    昨天有个朋友想要实现一个功能,就是在ArcMap中编辑数据的时候,能够通过快捷键自动设置预定义的属性,比如,选中若干要素,按A键,就自动填充属性,按B键,则又自动填充另外的属性字段. 单就这个功能而言 ...

  5. vue在某页面监听键盘输入事件

    需求:在某一网页,通过上下左右键控制一些操作 实现: 1.基本代码: 因为没有绑定特定的元素.所以我们将事件绑定到document上. //当前页面监视键盘输入 document.onkeydown ...

  6. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

  7. Winform下WebBrowser 编辑模式 监听键盘按键事件

    最近使用 WebBrowser 做了个富文本编辑器(其实网上有很多很多).例如下面这个玩意(不要在意界面神马的) WebBrowser在编辑模式下可以有一些HTML标签的功能,改变字体大小颜色等等等. ...

  8. js监听键盘回车

    //监听回车 $(document).keydown(function(e) { ) { $("#btnLogin").click(); } }) //input绑定回车 $('# ...

  9. js监听键盘方向键事件

    <SCRIPT language=javascript> document.onkeydown = chang_page; function chang_page() { || ) loc ...

随机推荐

  1. 在生产环境中使用Compose 【翻译】

    在生产环境中使用Compose 在开发环境中使用Compose定义你的应用,可以使用此定义在不同的环境,(如 CI.暂存和生产)中运行应用程序. 部署应用程序的最简单方法是在单个服务器上运行该应用程序 ...

  2. Api文档生成工具与Api文档的传播(pdf)

    点击查看apidoc生成文档demo 1 环境和工具 win10 apidoc:注释生成api文档 wkhtmltopdf:apidoc生成的是html,不适合传播,于是通过wkhtmltopdf将h ...

  3. arcgis js之地图分屏同步

    arcgis js之地图分屏同步 原理: 新建两个map两个view或者一个map两个view.对地图进行移动事件绑定,在地图移动时同步地图方位 代码: views.forEach((view) =& ...

  4. linux文件目录详细介绍

    linux文件目录 目录 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里 /etc 存放系统管理和配置文件 /home 存放所有用户文件的根目录,是用户主目录的基点 ...

  5. C++ STL 之 容器的深拷贝和浅拷贝

    如果我们没有提供拷贝构造函数,没有重载=操作符,vector 对我们的 mc 对象进行的简单的浅拷贝,将拷贝的对象插入到容器中,导致我们的 mc 对象的 data 指针和容器中mc 对象的拷贝对象中的 ...

  6. 安卓开发之SimpleAdapter的使用

    package com.lidaochen.test; import android.support.v7.app.AppCompatActivity; import android.os.Bundl ...

  7. Spring MVC 全局异常处理&文件上传

    Spring MVC 全局异常处理 使用SimpleMappingExceptionResolver实现异常处理 在welcome-servlet.xml进行如下配置: <bean class= ...

  8. 80C51串行口

    串行通信是指 使用一条数据线,将数据一位一位地依次传输,每一位数据占据一个固定的时间长度 单工.半双工.全双工 单工数据传输只支持数据在一个方向上传输 半双工数据传输允许数据在两个方向上传输,但是,在 ...

  9. Java虚拟机内存基础、垃圾收集算法及JVM优化

    1 JVM 简单结构图   1.1 类加载子系统与方法区 类加载子系统负责从文件系统或者网络中加载 Class 信息,加载的类信息存放于一块称 为方法区的内存空间.除了类的信息外,方法区中可能还会存放 ...

  10. 为何一线城市的企业更愿意选择 Spring Cloud?

    最近公司正在搭建微服务框架,处于小白的我,赶紧借书,上网,实操的学习了一下,下面是一些自己的入门的总结: 目录: 一.怎么理解Spring Cloud? 一.Spring Cloud 的优势在哪? 一 ...