我在使用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. 开源个人实用XML翻译小工具,实现

    前言 IntelliSense 是一种代码完成辅助工具,可以在不同的集成开发环境 (IDE) 中使用,在开发 .NET 项目时,SDK 仅包含英语版本的 IntelliSense 文件. 对英语不好的 ...

  2. js模拟点击下载文件到本地

    function fake_click(obj) { var ev = document.createEvent("MouseEvents"); ev.initMouseEvent ...

  3. NoSQL 述评

    作为主库的 nosql 只有 CockroachDB.TiKV 以及 MongoDB(从4.0后事务似乎可用了),CockrouchDB 已经收费,另外 YugabyteDB 也可选,但大家的反馈都不 ...

  4. Getting Started with JavaFX

    https://openjfx.io/openjfx-docs/#maven Run HelloWorld using Maven If you want to develop JavaFX appl ...

  5. Vue3封装一个ElementPlus自定义上传组件2--无弹窗

    Vue3封装一个ElementPlus自定义上传组件2--无弹窗 写在前面: 无弹窗的上传组件它来了,依旧是小巧又好用,只不过这回我用的是前端直传的方式,采用http-request进行文件上传,中间 ...

  6. [转]CLion 2019去掉灰色参数提示（parameters hints）

    众所周知,clion是一个很好用的c plus plus IDE,刚装好的clion默认的设置多少有一些不符合口味的地方,在查看代码或者敲代码的时候看到如下这样的灰色提示,我是有点受不了的: 之前用的 ...

  7. Python 代码实现生命之轮Wheel of life

    最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的.使用Python创建生命倒计时图表,珍惜时间,活在当下. 生命之轮(Wheel of life),这一概念最初由 Success Motiv ...

  8. 快速定位Linux 内核驱动中GPIO冲突

    #全开开kernel log echo "8" > /proc/sys/kernel/printk #打开gpiolib 动态调试 echo 'file gpiolib.c ...

  9. jwt-shiro-springsecurity-oauth2对比

    1 实现token的方式概述 在cookie\session\token辨析一文已经知道了token这个概念,里面简单说明了token的组成就是数据+签名,给出了token实现身份验证的流程,并且详细 ...

  10. ForkJoin全解2：forkjoin实际工作流程与实现

    1.相关概念解释 1.1 "内部"和外部 当一个操作是在非ForkjoinThread的线程中进行的,则称该操作为外部操作.比如我们前面执行pool.invoke,invoke内又 ...