Vue 组件里添加键盘事件 keydown keyup不生效问题

news/2024/12/18 13:41:21/文章来源:https://www.cnblogs.com/echo-lovely/p/18614705

我在使用VueDraggableResizable制作一个窗口,然后需要点击esc关闭窗口。
但是键盘事件没有生效,写任何位置都不行。

解决方案

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/854778.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ABB喷涂机器人ACU 3HNA024871-001维修

ABB喷涂机器人ACU 3HNA024871-001在以下情况下可能会出现气压异常: - 气压要求变化:如果气压要求从8巴降至6巴,这可能会导致气压异常。 - 设备故障:如果ACU设备本身出现故障,例如内部压降问题或者闭环调节系统出现问题,也可能导致气压异常。 - 维护不当:如…

Z-BlogPHP 报错“error-9 该文章不存在或设置了权限”,如何解决?

当您在使用 Z-BlogPHP 时遇到“error-9 该文章不存在或设置了权限”的错误,通常是因为文章的状态被更改或设置了访问权限。以下是一些解决此问题的方法:检查文章状态:确认文章的状态是否为已发布。如果文章被设置为草稿或其他未发布的状态,非作者或管理员账号将无法访问。 …

Z-BlogPHP 报错“主题模板的编译文件不存在”,如何解决?

当您在使用 Z-BlogPHP 时遇到“主题模板的编译文件不存在”的错误,通常是因为系统未能正确编译主题模板文件,导致无法正常显示网站内容。以下是一些解决此问题的方法:清空缓存并重新编译模板:登录 Z-BlogPHP 后台管理界面,进入首页。 在首页中,找到并点击“清空缓存并重新…

UniApp小程序开发避坑事项

首次使用UniApp及其UI进行小程序开发,记录项目中需要注意事项,方便以后避坑^_^! 1、uni-forms的使用,如果需要自定义校验,uni-forms上不能绑定rules,需要在data中定义rules,然后在onReady中将uni-forms与rules绑定。<uni-forms ref="valiForm" :modelValue=…

探索全新摸鱼世界,【摸鱼办】一站式轻松解决打工人在线摸鱼的秘密武器!

你好,摸鱼人!👨‍💻 工作再忙,一定不要忘记摸鱼哦 🐟! 有事没事起身去茶水间 ☕️,去厕所 🚾,去走廊走走 🚶,去找同事聊聊八卦 🆕!别老在工位上坐着,钱是老板的 👨‍💼 但命是自己的 🤷‍♂️。00. 什么是【摸鱼办】? 摸鱼办是一款专为上班族打造的…

C10-8 SQL注入II + XSS练习 I

情境参加了培训的第八次课, 涉及到了SQL宽字节注入, 从MySQL注入到GetShell, SQL注入的基本绕过手法, SQL注入防御, SQLmap的使用; XSS基本概念和原理 的介绍(包括3种XSS及其手动测试). 这里是第八课的作业题, 及我的解答. (注: 使用本地虚拟机开启dvwa靶场, 10.0.0.155是ubunt…

【流量分析】基于安全产品DNS隧道流量分析

免责声明 本文仅限于技术讨论与分享,严禁用于非法途径。若读者因此作出任何危害网络安全行为后果自负,与本号及原作者无关。域名准备 选择哪家的云都没问题,这里我选择的TX云,因为之前注册过了,自己拿来做个流量分析不成问题。 域名添加解析记录 需要准备自己的vps作为DNS…

14伪元素-CSS的继承和层叠-元素特性

一、之前剩下的东西 上节讲解了CSS常见的选择器:通用选择器,元素选择器,类选择器,id选择器,属性选择器,组合选择器,伪类选择器 之前讲到伪类选择器非常多,但是使用的却不多,上次主要讲到动态伪类,其中:hover最重要。 1、伪元素pseudo-elements 常用的伪元素是: :fir…

分享一个线程状态

本文来自博客园,作者:Eular,转载请注明原文链接:https://www.cnblogs.com/euler-blog/p/18614627

Bootstrap popover功能扩展jquery插件

这是一款Bootstrap popover功能扩展jquery插件。该jquery插件在原生Bootstrap popover功能的基础上,添加了一些新的功能,例如自动定位,支持情景模式等。在线演示 下载使用方法 在页面中引入jquery和bootstrap相关文件,以及bootstrap-popover-x.css和bootstrap-popover-x.j…

大学微积分 AB 第四单元:区分的语境应用

(先略)根据上下文解释导数的含义 定的。

欢迎 PaliGemma 2 – 来自 Google 的新视觉语言模型

我们很高兴迎来 Google 全新的视觉语言模型 PaliGemma 2,这是 PaliGemma 的一个新版本。与其前代产品一样,PaliGemma 2 使用强大的 SigLIP 进行视觉处理,但在文本解码部分升级到了最新的 Gemma 2。 模型规模和输入分辨率 PaliGemma 2 提供了新的预训练模型,参数规模包括 3B…