我在使用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. 10C++选择结构（4）——教学

    一.switch语句 (第25课 成绩等级) 问题:风之巅小学规定,若测试成绩大于或等于90分为"A",大于或等于70分小于90分为"B",大于或等于60分小于 ...

  2. Flutter 收起键盘

    Flutter收起键盘 在根Widget中嵌套GestureDetector return GestureDetector( // 触摸收起键盘 behavior: HitTestBehavior.t ...

  3. 【萌狼蓝天】swagger速成

    相关链接 编辑器:https://editor.swagger.io/ 文档:https://openapi.apifox.cn/ 基础信息设置 openapi: 3.0.3 info: title: ...

  4. 【数据结构】【直接排序法】Java代码

    public class 直接排序 { /** * 直接排序法 仅排序1轮 * @param arr 数组 * @param ji 基准索引,填写几,就以谁为基准进行一次划分 */ public st ...

  5. 冒泡排序------python实现

    if __name__ == '__main__': ''' 算法描述 1.比较相邻的元素,更具大小交互位置 2.对每一对相邻元素作同样的工作,从开始第一队到结尾的最后一对,即可选出最大的数 3.所有 ...

  6. Qt6.2发布（含项目代码升级到Qt6吐血经验总结）

    一.前言 升级到Qt6吐血经验总结 https://gitee.com/feiyangqingyun/qtkaifajingyan#二升级到qt6 我很高兴地宣布 Qt 6.2 的发布.Qt 6.2 ...

  7. AutoCAD 2020中文版建筑设计从入门到精通下载链接

    AutoCAD 2020中文版建筑设计从入门到精通下载链接 链接:https://pan.baidu.com/s/1EgFHOSKfPrr9Xdp3bNA-pA或https://pan.baidu.c ...

  8. 即时通讯技术文集（第40期）：推送技术合集(Part2) [共18篇]

    为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第 40 期. [- 1 -] 一个基于长连接的安全可扩展的订阅/推送服务实现思路 [链接] h ...

  9. 网络编程懒人入门(十四)：到底什么是Socket？一文即懂！

    本文由cxuan分享,原题"原来这才是 Socket",有修订. 1.引言 本系列文章前面那些主要讲解的是计算机网络的理论基础,但对于即时通讯IM这方面的应用层开发者来说,跟计算机 ...

  10. spark (五) RDD的创建 & 分区

    目录 1. RDD的创建方式 1.1 从内存创建RDD 1.2 从外部存储(文件)创建RDD 1.3 从其他的RDD创建 1.4 直接 new RDD 2. 分区(partition) 2.1 mak ...