我在使用VueDraggableResizable制作一个窗口，然后需要点击esc关闭窗口。

但是键盘事件没有生效，写任何位置都不行。

解决方案

  1. 在需要触发esc事件的div或其他上给出 tabindex 属性，属性值写啥不重要。tabindex可以使元素获取焦点，而键盘事件触发需要焦点。
  2. 如果是其他库的组件，注意检查@keydown.esc.native，触发原生事件，而不是其他库emit的事件
  3. keypress事件不要使用，从现代浏览器开始，keypress 已被废弃，不建议再使用。替代方案是 keydown 和 keyup。

Vue 组件里添加键盘事件 keydown keyup不生效问题的更多相关文章

  1. webpack单独构建scss文件与.vue组件里构建scss的一个坑

    在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...

  2. 键盘事件keydown、keypress、keyup随笔整理总结（摘抄）

    原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...

  3. 详解键盘事件(keydown，keypress，keyup)

    一.键盘事件基础 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键 顺序为:keydown -> keypre ...

  4. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  6. vue 组件中添加样式不生效

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v ...

  7. Vue中监听 键盘事件及修饰符

    键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F24 8            ...

  8. 键盘事件keydown、keypress、keyup随笔整理总结

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  9. 键盘事件keydown、keypress、keyup

    事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发k ...

  10. 无线端不响应键盘事件(keydown,keypress,keyup)

    今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...

随机推荐

  1. WPS Pro 最新专业版，一站式办公

    聊一聊 随着科技的进步,办公软件已经成为现代人工作和学习中不可或缺的重要工具.无论是在企业.学校还是个人使用中,办公软件都能够帮助我们提高工作效率.组织信息和进行沟通.在众多的办公套件中,微软的Off ...

  2. 鸿蒙应用开发从入门到入行 - 篇2:HarmonyOS开发快速基础入门

    鸿蒙应用开发从入门到入行 第二天 - 开发工具与基础组件 导读:在本篇文章里,您将掌握鸿蒙开发工具DevEco的基本使用.ArkUI里的基础组件,并通过制作一个简单界面掌握使用 鸿蒙开发工具 - De ...

  3. 中电金信：亚洲TOP1 霸榜15年

    近日,国际权威语言服务研究机构CSA Research公布了<2022年全球语言服务提供商100强>和<亚太地区TOP 30语言服务商>排名报告. 中电金信凭借卓越的品质管控. ...

  4. LNMP Wordpress phpMyAdmin的部署记录

    背景 CentOS 8.2服务器,使用的虚拟服务器.只开放22与80端口.设置默认页面是wordpress的入口,phpmyadmin使用虚拟目录的形式进行访问. 安装 总体思路按照此文章进行.我进行 ...

  5. 【MyBatis】学习笔记12：通过级联属性赋值解决多对一的映射关系

    [Mybatis]学习笔记01:连接数据库,实现增删改 [Mybatis]学习笔记02:实现简单的查 [MyBatis]学习笔记03:配置文件进一步解读(非常重要) [MyBatis]学习笔记04:配 ...

  6. spring boot 启动原理解析

    https://www.cnblogs.com/xiaoxi/p/7999885.html 我们开发任何一个Spring Boot项目,都会用到如下的启动类 1 @SpringBootApplicat ...

  7. Qt4/5升级到Qt6吐血经验总结V202308

    00:直观总结 增加了很多轮子,同时原有模块拆分的也更细致,估计为了方便拓展个管理. 把一些过度封装的东西移除了(比如同样的功能有多个函数),保证了只有一个函数执行该功能. 把一些Qt5中兼容Qt4的 ...

  8. 用 Ingram 和 masscan 来扫描全网存在漏洞的camera

    前言 大学的时候也写过和Ingram差不多的工具,不过那时候已经玩到没有兴致了,代码已不知道哪里去.没想到在Github看到了这个工具,实现思路和我的几乎一样,互联网就是这么神奇. Ingram的Gi ...

  9. 《Hough变换及其在信息处理中的应用》电子书下载

    <Hough变换及其在信息处理中的应用>电子书下载:百度云盘,  提取码:9zyi

  10. 记录一次线上服务OOM排查

    外面,阳光明媚,一切正好. 就在我欢天喜地准备迎来愉快的双休时,忽然之间,天塌了. 刚上线一小时的服务内存异常OOM了! 老实说,在我印象里OOM问题只存在于网上案例中,练习编码时常两年半,还是第一次 ...