我在使用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. k3s 轻量级Kubernetes 安装实例

    k3s是由Rancher开发的轻量级Kubernetes,支持嵌入式系统,边缘计算节点等 易于安装,所有组件都在一个小于100MB的二进制文件中,占用资源低 1.1.简单安装试例 curl -sfL ...

  2. 【Python】【Jupyter】Jupyter 的简单使用 与 Python的基本输出输入

    上课无聊写着玩的,不必当真. Jupyter 的简单使用 与 Python的基本输出输入 目录 Jupyter 的简单使用 与 Python的基本输出输入 数据准备 输出 输入 一些练习 print( ...

  3. Netty内存池泄漏问题

    为了提升消息接收和发送性能,Netty针对ByteBuf的申请和释放采用池化技术,通过PooledByteBufAllocator可以创建基于内存池分配的ByteBuf对象,这样就避免了每次消息读写都 ...

  4. Qt/C++地图标注点的添加删除移动旋转/指定不同图标和动图/拿到单击信号

    一.前言说明 标注点在地图开发中是最常见的应用场景之一,比如在地图上需要显示设备的位置,基本上都是添加标注点,指定图片和尺寸已经经纬度坐标位置.这个功能在每种地图内核中都提供的,这个并没有任何难点,在 ...

  5. Qt编写地图综合应用35-设备分布图

    一.前言 设备分布图在所有的地图应用案例项目中,最常见最普遍最基础,就是将项目中的设备信息,比如设备名称.设备所在的经纬度坐标.设备的其他信息(设备地址.设备参数等),通过标注点的形式添加到地图中,至 ...

  6. 祝大家这周圣诞快乐！！本周进军多模态！😀From LLMs to MLLMs:😜Exploring the Landscape of Multimodal Jailbreaking

    从LLMs到MLLMs:探索多模态越狱攻击的前景 禁止盗用,侵权必究!!!欢迎大家积极举报 ①脆弱性代表:越狱攻击(恶意指令/训练&解码干预). ②最近的越狱攻击: 整体说:构建越来越复杂场景 ...

  7. findHomography()函数详解

    indHomography: 计算多个二维点对之间的最优单映射变换矩阵 H(3行x3列) ,使用最小均方误差或者RANSAC方法 函数功能:找到两个平面之间的转换矩阵. Mat cv::findHom ...

  8. JSON解析的这6种方案，真香！

    前言 在 Java 开发中,解析 JSON 是一个非常常见的需求. 不管是和前端交互.调用第三方接口,还是处理配置文件,几乎都绕不开 JSON. 这篇文章总结了6种主流的 JSON 解析方法,希望对你 ...

  9. itextpdf 找出PDF中 文字的坐标

    目录 添加引用 添加工具类 调用 找到位置,签名的话见:https://www.cnblogs.com/vipsoft/p/18644127 新项目可以尝试一下 iText 7 , 我这边是老项目所以 ...

  10. 图层级GIS数据格式概述

    图层级GIS数据格式概述 1. GEOJSON的优缺点 优点: 开放标准:GEOJSON是一个开放的标准,这意味着它可以被任何支持JSON的平台或工具使用. 易于理解和使用:由于GEOJSON基于JS ...