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,也 ...
随机推荐
- 现有 Vue.js 项目快速实现多语言切换的一种思路
Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA ...
- linux操作指南-01
目录 1.1 MBR 1.2 装双系统的坑 1.3 主机硬盘的主要规划 前言:记录下最近在看的鸟哥Liunx私房菜,虽然不是第一次看了..想记录几章开发中用的比较多的部分大致是以下几个章节 第3章 主 ...
- domReady的理解
domReady的理解 domReady是名为DOMContentLoaded事件的别称,当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表.图 ...
- ECMAScript 6新特性简介
目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言 ...
- Cypress系列(53)- as() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 起别名以供以后使用 可在 cy.g ...
- brew清华镜像
https://mirror.tuna.tsinghua.edu.cn/help/homebrew/
- Spring Cloud实战 | 最终篇:Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
一. 前言 在上一篇文章介绍 youlai-mall 项目中,通过整合Spring Cloud Gateway.Spring Security OAuth2.JWT等技术实现了微服务下统一认证授权平台 ...
- 程序员的开源月刊:HelloGitHub(第 54 期)
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...
- Hbuilder MUI 下拉选择与时间选择器
一. Hbuilder 下拉选择 <link rel="stylesheet" href="../../../assets/mui/css/mui.picker.m ...
- python3 进行接口测试
最近有研究接口测试,然后查了查资料,发现有两种方法,一种是使用urllib库,一种是使用requests库.而在这里,我使用的是requests库,为什么要用这个呢? 从官方文档看出,python的标 ...