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. xpath的一些常用使用

    xml文档<html> <head> <title>My page</title> </head> <body> <h2& ...

  2. 怎样启动Nginx并设置开机自动运行

    1. 启动 sudo systemctl start nginx.service 2. 设置开机自动运行 sudo systemctl enable nginx.service

  3. TCP协议探究(四):定时器

    1 概述 重传定时器:使用于当希望收到另一端的确认. 坚持(persist)定时器:使窗口大小信息保持不断流动,即使另一端关闭了其接收窗口 保活(keepalive)定时器:用于检测一个空闲连接的另一 ...

  4. 【原创】大叔经验分享(82)logstash一个实例运行多个配置文件

    logstash一个实例运行多个配置文件,将所有配置文件放到以下目录即可 /usr/share/logstash/pipeline 但是默认行为不是每个配置文件独立运行,而是作为一个整体,每个inpu ...

  5. 【QT 学习笔记】 一、 VS2015+ QT环境安装

    1.   安装    qt-opensource-windows-x86-msvc2015_64-5.6.0.exe   (根据自己的VS版本来安装) 下载地址 http://download.qt. ...

  6. 【php设计模式】责任链模式

    责任链模式为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行为型模式. 在这种模式中,通常每个接收者都包含对另一个接收者的引用.如果一个对 ...

  7. vue组件常用传值

    一.使用Props传递数据   在父组件中使用儿子组件 <template> <div> 父组件:{{mny}} <Son1 :mny="mny"&g ...

  8. 转载:PHP扩展函数库-文件系统、进程与网络

    PHP的扩展函数库十分庞大,官方的非官方的,在这里只记录一些目前比较常用的扩展,对于这一部分,也只是记录其中一些核心的函数,不是一个全面记录.对于详细的扩展函数说明,需要在使用中参考PHP的用户手册. ...

  9. vue项目中引入animate.css和wow.js

    本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...

  10. 从0到1写rtos:事件的控制块与通知

    任务的状态: 未创建:只定义了任务代码,未调用tTaskInit()初始化 就绪:任务已经创建完毕,且等待机会占用CPU运行 运行:任务正在占用CPU运行代码 延时:任务调用tTaskDelay()延 ...