Vue中监听 键盘事件及修饰符
键盘事件:
keyCode 实际值
- 48到57 0 - 9
- 65到90 a - z ( A-Z )
- 112到135 F1 - F24
- 8 BackSpace ( 退格 )
- 9 Tab
- 13 Enter ( 回车 )
- 20 Caps Lock ( 大写)
- 32 Space ( 空格键 )
- 37 Left ( 左箭头 )
- 38 Up ( 上箭头 )
- 39 Right ( 右箭头)
- 40 Down ( 下箭头 )
别名按键设置
- .delete 删除
- .tab Tab
- .enter 回车
- .esc 退出
- .space 空格
- .left 左箭头
- .right 右箭头
- .down 上箭头
- .up 下箭头
- .ctrl Ctrl
- .alt Alt
- .shift Shift
修饰符
- .stop 阻止事件冒泡 (等同于JavaScript中的
event.stopPropagation()) - .prevent 阻止默认行为 (等同于JavaScript中的
event.preventDefault()) - .self 当事件在该元素本身触发回调
- .capture 触发事件捕获
- @once 只执行一次
Vue中监听 键盘事件及修饰符的更多相关文章
- 在Javascript中监听flash事件(转)
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...
- wemall app商城源码Fragment中监听onKey事件
wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享android开发Fragment中监听onK ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- Fragment中监听onKey事件,没你想象的那么难。
项目中越来越多的用到Fragment,在用Fragment取代TabHost的时候遇到了一个问题,我们都知道,TabHost的Tab为Activity实例,有OnKey事件,但是Fragment中没有 ...
- vue中监听页面是否有回车键按下
需求:当我在登录页面输入密码和账号后,按下回车键实现登录 mounted(){ let _this = this document.onkeydown = function(e) { if(e.key ...
- 【Layui__监听button】在form中监听按钮事件
1. 前言 在使用form表单的按钮时,点击按钮总是页面刷新,代码如下 <button class="layui-btn" lay-submit lay-filter=&qu ...
- vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- vue中监听返回键
问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
随机推荐
- JavaScript中常用的数据输出方式解析
在js中,一般使用如下几种方式进行数据的输出: 1. 在浏览器的控制台输出 浏览器F12打开浏览器控制台(一般前端开发人员必备浏览器为谷歌浏览器,下面就以谷歌浏览器为例对控制台尽心解析): 1.1 E ...
- 纯java代码在控制台运算电话本(不使用数据库)
分享学习 Task_08 package cn.rzpt; import java.util.List; import java.util.Scanner; public class Task_08 ...
- zookeeper(4) 网络
zookeeper底层通过NIO进行网络传输,如果对NIO不是很熟悉,先参见java NIO.下面我们来逐步实现基于NIO的zookeeper实现,首先我们要定义应用层的通信协议. 传输协议 请求协议 ...
- MATLAB中均值、方差、均方差的计算方法
MATLAB中均值.方差.均方差的计算方法 1. 均值 数学定义: Matlab函数:mean >>X=[1,2,3] >>mean(X)=2 如果X是一个矩阵,则其均 ...
- 一道无限极类 PHP 试题
记某次笔试碰到的一道无限极类试题,当时时间比较紧(满满六页试题),还是手写代码,所以最终写的有点错误.记不住原题了,但是要求都知道,特此记录下来! 试题 有下面一个数组: $arr = [ '小红' ...
- UOS服务器常见问题
UOS服务器安装完成之后,xshell工具无法远程, 描述 我安装完系统后,用xshell工具无法远程,必须在系统上才能进去我是通过centos7的kvm虚拟工具上刷的统信的系统,安装方式: 最小化安 ...
- mybatis进行mapper.xml测试的时候发生"必须为元素类型 “mapper” 声明属性 “namespace”
1.Caused by Caused by: org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 45; 必须为元素类型 " ...
- Cesium系统学习整理(一)
(一)Cesium的概念定义 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎.Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的 ...
- Linux NSF网络共享盘
服务器安装: yum -y install nfs-utils rpcbind 服务器配置 :vi /etc/exports 例: /root/docs 192.168.1.*(rw,sync,no ...
- Spring AOP系列(一)— 代理模式
Spring AOP系列(一)- 代理模式 AOP(Aspect Oriented Programming)并没有创造或使用新的技术,其底层就是基于代理模式实现.因此我们先来学习一下代理模式. 基本概 ...