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,也 ...
随机推荐
- k8s控制器资源
k8s控制器资源 Pod pod在之前说过,pod是kubernetes集群中是最小的调度单元,pod中可以运行多个容器,而node又可以包含多个pod,关系如下图: 在对pod的用法进行说明之前 ...
- 云计算openstack核心组件——neutron网络服务(9)
一.虚拟机获取 ip: 用 namspace 隔离 DHCP 服务 Neutron 通过 dnsmasq 提供 DHCP 服务,而 dnsmasq 通过 Linux Network Namespa ...
- 数组如何在ElasticSearch中索引
一.简介 在ElasticSearch里没有专门的数组类型,任何一个字段都可以有零个和多个值.当字段值的个数大于1时,字段类型就变成了数组. 下面以视频数据为例,介绍ElasticSearch如何索引 ...
- uniapp vue v-html,显示富文本,内容img图片超出解决办法
uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕 重要的地方,例如<img sr ...
- bellman-ford算法求K短路O(n*m),以及判负环O(n*m)
#include<iostream> #include<algorithm> #include<cstring> using namespace std; cons ...
- SSTI服务器模板注入(以及关于渲染,solt的学习)&&[BJDCTF2020]The mystery of ip 1
ssti服务器模板注入 ssti:利用公共 Web 框架的服务器端模板作为攻击媒介的攻击方式,该攻击利用了嵌入模板的用户输入方式的弱点.SSTI 攻击可以用来找出 Web 应用程序的内容结构. slo ...
- phpcms v9.6.0任意文件上传漏洞
距离上一次写博客已经过去很长一段时间了,最近也一直在学习,只是并没有分享出来 越来越发现会的东西真的太少了,继续努力吧. 中午的时候遇到了一个站点,看到群里好多人都在搞,自己就也去试了试,拿下来后发 ...
- Java基础——锁
1.锁 当一个共享资源被多方访问时为了避免发生冲突而施加的一种机制 2.乐观锁和悲观锁 Java中锁在宏观分为乐观锁和悲观锁 乐观锁:是一种乐观思想,认为多读少写,一般情况下数据在修改时不会出现冲突, ...
- SpringMVC自定义日期转换器
一.创建自定义日期转换器类 1 public class StringToDateConverter implements Converter<String,Date> { 2 @Over ...
- Centos最小化安装后,不能使用yum命令的解决办法
刚刚最小化方式安装了CentOS 7 后,想查看一下config,却发现没有config文件,就想用yum下载一个,但是发现yum不能正常工作!!! 一,输入安装X Window命令,安装出错!! 在 ...