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. kubernetes kubeadm安装v1.14

    1.我们这里准备两台Centos7的主机用于安装,后续节点可以根究需要添加即可:master node01两台都得改:cat /etc/hosts192.168.71.134 master192.16 ...

  2. Linux环境下安装Nginx及其使用

    https://www.jb51.net/article/136161.htm 一.查看CentOS的版本 ? 1 cat /etc/redhat-release 二.添加资源库 在 CentOS 系 ...

  3. WinPE基础知识之导出表

    // 导出的东西包括函数(变量.类)地址,序号,函数(变量.类)名 typedef struct _IMAGE_EXPORT_DIRECTORY { DWORD Characteristics; // ...

  4. 温度传感器 DS18B20

    1. 实物图 2. 64位(激)光刻只读存储器 开始8位(28H)是产品类型标号,接着的48位是该DS18B20自身的序列号,最后8位是前面56位的循环冗余校验码 光刻ROM的作用是使每一个DS18B ...

  5. mock.js学习之路(二)easy-mock(Vue中使用)

    1.easy-mock建立外部数据,注册账号,创建数据,详细使用过程参照https://www.easy-mock.com/docs文档说明 2.项目中如何引入使用 ①配置一下config.index ...

  6. 第一章、Django概述

    目录 第一章.Django概述 一.了解软件开发架构 二.HTTP协议 三.响应状态码 四.请求方式 五.基于wsgiref模块 六..动静态网页 七.python三大主流web框架 八.安装Djan ...

  7. Python 嵌套列表解析

    将一个3*4矩阵转为4*3矩阵Matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12],]afterMatrix = [[row[i] for ro ...

  8. linux基础2-cd、mkdir、touch、umask、chattr、lsattr、SUID/SGID/Sticky Bit

    一 cd : . 代表当前目录 .. 代表上一层目录 - 代表前一个工作目录 ~ 代表[目前用户身份]所在的自家目录 与cd效果相同 ~account 代表 account 这个用户的自家家目录 二m ...

  9. Centos7 docker、harbor 安装配置

    Docker 安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.cloud.tencent.com/repo/epel-7.repo wget ...

  10. 自定义系统类加载器源码分析与forName方法底层剖析

    基于上一次[https://www.cnblogs.com/webor2006/p/9240898.html]Launcher的分析继续,上次分析到了这: 接着创建应用类加载器,其创建过程其扩展类加载 ...