Vue11-键盘事件

一、键盘事件:keydown和keyup事件

keydown 和 keyup 是两种常用于处理键盘输入事件的JavaScript事件。当你在网页的输入框或其他可输入元素上按下或释放键盘上的某个键时,这些事件就会被触发。

1-1、keydown 事件

当用户按下键盘上的某个键时,keydown 事件会被触发。这个事件在按键被按下且字符尚未出现在屏幕上时发生。在 keydown 事件中,你可以通过 event.key 属性获取被按下的键的值(如果它是一个可打印的字符),或者通过 event.code 属性获取该键的完整键盘代码(例如 "KeyA" 表示 A 键)。

    <div id="root"><input type="text" placeholder="按下回车提示输入"></div><script>document.addEventListener('keydown', function(event) {  console.log('Key pressed:', event.key);  });</script>

1-2、keyup事件

当用户释放键盘上的某个键时,keyup 事件会被触发。这个事件在按键被释放且字符已经出现在屏幕上时发生。与 keydown 类似,你可以通过 event.key 或 event.code 获取被释放的键的信息。

一般用keyup事件。 

1-3、示例

 

1-4、vue别名

二、Vue中常用按键的9个别名

键盘上,任何一个按键,都有自己的名字和编码!!!

获取按键的名字:event.key

获取按键的编码:event.keycode。

2-1、tab健

功能:将光标的焦点从当前元素身上切走

用tab健,必须配合keydown使用

2-2、4个系统修饰健

需求:只有按:ctrl+y才能触发函数,其余按键不行

2-3、keycode指定按键(不推荐)

不推荐,因为不同的键盘可能keycode不同。

2-4、自定义键盘别名

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

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

相关文章

vue3第三十九节(TS中的高级类型,分类以及使用注意事项)

前言&#xff1a;为什么需要使用高级类型&#xff0c;正常的类型不能满足日常的业务需求&#xff0c;对于复杂的数据结构、函数签名、类型转换&#xff0c;我们需要使用高级类型来处理&#xff0c;常用的高级类型包含以下几种&#xff1a; 常用的类型定义&#xff1a; 基本类…

SQL入门大全

SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理关系型数据库的标准编程语言。它具有数据操纵和数据定义等多种功能&#xff0c;为数据库管理系统提供了强大的交互性特点&#xff0c;能够极大地提高计算机应用系统的工作质量与…

【源码】html+JS实现:24小时折线进度图

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>24小时折线进度图</title> <st…

安全等保评测-什么是“等保“?

等级保护测评是经公安部认证的具有资质的测评机构&#xff0c;依据国家信息安全等级保护规范规定&#xff0c;受有关单位委托&#xff0c;按照有关管理规范和技术标准&#xff0c;对信息系统安全等级保护状况进行检测评估的活动。 等保测评全称为信息安全等级保护测评&#xf…

基于SpringBoot3+Vue3宠物小程序宠物医院小程序的设计与实现

大家好&#xff0c;我是程序员小孟。 最近开发了一个宠物的小程序&#xff0c;含有详细的文档、源码、项目非常的不错&#xff01; 一&#xff0c;系统的技术栈 二&#xff0c;项目的部署教程 前端部署包&#xff1a;npm i 启动程序&#xff1a;npm run dev 注意事项&…

qmt量化交易策略小白学习笔记第30期【qmt编程之获取行业概念数据--如何获取板块分类信息数据以及板块成分股数据】

qmt编程之获取行业概念数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;咨询免费开通量化回测与获取实盘权限&#xff0c;欢迎和博主联系&#xff01; 获取行业概念数…

【通信协议-RTCM】GPS-RTK可观测消息 ---- 对应RTCM十六进制 编码ID(3E9 3EA 3EB 3EC)

1. 消息头的内容&#xff0c;类型1001、1002、1003、1004:GPS RTK消息 DATA FIELDDF NUMBERDATA TYPENO. OF BITS Message Number(e.g.,“1001” 0011 1110 1001) - 消息编号 DF002 uint12 12 Reference Station ID - 参考值ID DF003 uint12 12 GPS Epoch Time (TOW) - 周内秒…

深度学习的点云分割

深度学习的点云分割 点云分割是计算机视觉中的一个重要任务&#xff0c;特别是在三维数据处理和分析中。点云数据是由大量三维点构成的集合&#xff0c;每个点包含空间坐标&#xff08;x, y, z&#xff09;&#xff0c;有时还包含其他信息如颜色和法向量。点云分割的目标是将点…

Hadoop 3.X HA集群部署

准备工作 1、确认各个服务器网络是否互通、时间是否同步 2、确认各个节点部署那些组件 ip地址host名部署组件192.168.190.130h202406131 NameNode ResourceManager QuorumPeerMain JournalNode DFSZKFailoverController JobHistoryServer 192.168.190.131h202406132 NameNod…

React中“WebSocket is closed before the connection is established“

在 React 中你需要将它添加到你useEffect的return useEffect(() > {const socket new WebSocket(address);return () > {if (socket.readyState 1) { // <-- This is importantsocket.close();}} }, []);然而&#xff0c;这不仅仅是最好的解决方案&#xff01;您需…

uniapp地图选择位置

直接上代码 通过一个点击事件调用官方api即可调用 点击调用成功后显示如下 然后选择自己所需要的位置即可

RAM IP核配置

REVIEW 之前已经学习过&#xff1a; ROM:FPGA寄存器 Vivado IP核-CSDN博客 串口接收&#xff1a;Vivado 串口接收优化-CSDN博客 1. 今日摸鱼计划 RAM创建与测试 小梅哥视频&#xff1a; 21C_嵌入式块存储器RAM介绍_哔哩哔哩_bilibili 21D_嵌入式块存储器RAM实现和仿真_哔哩…

TrustZone 详解

标签: TrustZone 详解; TrustZone; TrustZone 详解 概述 TrustZone 是由 ARM 公司开发的一种安全技术,嵌入在其处理器中,用于在单个处理器上创建两个隔离的执行环境:普通世界(Normal World)和安全世界(Secure World)。这种双世界架构允许在一个设备上同时运行安全…

在不使用js在情况下只用css实现瀑布流效果

使用到的是grid 布局&#xff0c;需要注意的是grid-template-rows: masonry; 目前只有Firefox 浏览器支持这个效果&#xff0c;而且还是一个实验性属性需要在设置里面开发实验性选项才行。 实例 <!DOCTYPE html> <html> <head><title>Document</ti…

为CAP面板添加简单的Authentication登录验证功能 C#|.net

终于搞定了CAP Dashboard的登录验证功能! 因为网上找不到简单的CAP Dashboard的登录验证功能,所以这个功能摸索着开发了好久。 这个Authentication认证功能,不仅适用于CAP面板,也适用于懒得开发登录页面,但是又需要简单用户名密码登录的网页。 做过后端的比较熟悉,CAP面…

告别“人治”时代,物业运维平台能否成为行业新标准?

随着数字化时代的飞速发展&#xff0c;智能化、数字化已经遍及所有的行业。物业服务企业也不例外&#xff0c;你是否还在想象物业运维工作依旧停留在手动报修、纸质记录的古老时代&#xff1f;那么&#xff0c;你就OUT了&#xff0c;物业运维平台已经悄然崛起&#xff0c;正在以…

《Brave New Words 》2.2 阅读理解的未来,让文字生动起来!

Part II: Giving Voice to the Social Sciences 第二部分&#xff1a;为社会科学发声 The Future of Reading Comprehension, Where Literature Comes Alive! 阅读理解的未来&#xff0c;让文字生动起来&#xff01; Saanvi, a ninth grader in India who attends Khan World S…

鸿蒙轻内核A核源码分析系列七 进程管理 (2)

本文先熟悉下进程管理的文件kernel\base\core\los_process.c中的内部接口&#xff0c;读读代码&#xff0c;做些记录。 1、LiteOS-A内核进程全局变量 ⑴是进程池&#xff0c;存放各个进程控制块LosProcessCB的信息。⑵处开始的g_freeProcess是空闲进程链表&#xff0c;挂载各…

牛客周赛 Round 46 题解 C++

目录 A 乐奈吃冰 B 素世喝茶 C 爱音开灯 D 小灯做题 E 立希喂猫 F 祥子拆团 A 乐奈吃冰 #include <iostream> #include <cstring> #include <algorithm> #include <cmath> #include <queue> #include <set> #include <vector>…

unirest的使用

一、unirest是什么&#xff1f; Unirest 是一套跨语言轻量级HTTP开发库&#xff0c;由Kong团队维护&#xff0c;此团队同时维护着另一个著名开源网关项目API Gateway Kong. 二、Maveny依赖 <dependency><groupId>com.konghq</groupId><artifactId>uni…