Vue11-键盘事件

news2025/2/22 16:40:00

一、键盘事件: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.coloradmin.cn/o/1802073.html

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

相关文章

计算机组成原理——浮点加减运算的一道非计算例题

浮点加减运算的一道非计算例题 一、题目 文字描述 例6.31设机器数字长16位&#xff0c;阶码5位&#xff08;含1位阶符&#xff09;&#xff0c;基值为2&#xff0c;尾数11位&#xff08;含1位数符&#xff09;。 对千两个阶码相等的数按补码浮点加法完成后&#xff0c;由于规格…

Linux通过安装包配置环境变量(详细教程)

本章教程使用jdk1.8.0_241版本在Linux CentOS系统中,配置Java环境变量。 一、下载安装包 微云下载:https://share.weiyun.com/JeWZMDoh 二、上传安装包 将安装包上传到linux中的opt目录中 三、解压安装包 tar -xzvf jdk-8u241-linux-x64.tar.gz四、配置环境变量 vim /etc/p…

第6章 字典

第6章 字典 6.1 一个简单的字典6.2 使用字典6.2.1 访问字典中的值6.2.2 添加键值对6.2.3 先创建一个空字典6.2.4 修改字典中的值6.2.5 删除键值对6.2.6 由类似对象组成的字典6.2.7 使用 get()来访问值 6.3 遍历字典6.3.1 遍历所有键值对6.3.2 遍历字典中的所有键 6.3.3 按特定顺…

pytorch之猫狗识别项目

1. 导入资源包 资源包&#xff1a; import torchvision&#xff1a;PyTorch 提供的视觉库&#xff0c;包含了常用的计算机视觉模型架构、数据集以及图像转换工具。 from torchvision import datasets, models&#xff1a;导入 torchvision 中的 datasets 和 models 模块&#…

Anaconda软件:安装、管理python相关包

Anaconda的作用 一个python环境中需要有一个解释器, 和一个包集合. 解释器&#xff1a; 根据python的版本大概分为2和3. python2和3之间无法互相兼容, 也就是说用python2语法写出来的脚本不一定能在python3的解释器中运行. 包集合&#xff1a;包含了自带的包和第三方包, 第三…

Flutter基础 -- Flutter容器布局

目录 1. MaterialApp 1.1 组件定义 1.2 主要功能和属性 1.3 示例 2. 脚手架 Scaffold 2.1 定义 2.2 Scaffold 的属性 2.3 示例 PS: 对于 Scaffold 和 MaterialApp 3. 线性布局 Column Row 3.1 Row 3.2 Column 4. 盒模型 Box Model 4.1 定义 4.2 示例 5. 容器 C…

ubuntu20.04中设置包含ros节点的文件自启动

若文件里包含了ros话题的发布和接收&#xff0c;那么设置自启动时&#xff0c;应该首先将roscore设置为自启动。 首先确保roscore有一个systemd服务文件。如果还没有&#xff0c;需要在/etc/systemd/system/下创建一个。例如&#xff0c;一个基本的roscore.service文件可能如下…

html文件使用postcss-pxtorem适配移动端 使用tailwindcss库

项目截图 插件下载 npm i -D postcss8.4.38 postcss-cli10.1.0 postcss-pxtorem6.1.0 tailwindcss3.4.3postcss.config.js & tailwind.config.js postcss.config.js const pxToRem require(postcss-pxtorem) module.exports {plugins: [pxToRem({rootValue: 75,propLi…

[office] 快速删除excel中的空行和列的方法 #其他#学习方法#经验分享

快速删除excel中的空行和列的方法 用户在网上下载好的Excel表格打开之后发现有很多空白行&#xff0c;怎么样将这些空白行或单元格一次性删除掉呢?下面教大家在Excel中用定位一次性可以把空白行删除 用户在网上下载好的Excel表格打开之后发现有很多空白行&#xff0c;怎么样将…

【Unity】官方文档学习-光照系统

目录 1 前言 2 光照介绍 2.1 直接光与间接光 2.2 实时光照与烘焙光照 2.3 全局光照 3 光源 3.1 Directional Light 3.1.1 Color 3.1.2 Mode 3.1.3 Intensity 3.1.4 Indirect Multiplier 3.1.5 Shadow Type 3.1.6 Baked Shadow Angle 3.1.7 Realtime Shadows 3.1…

TriForce: 突破长序列生成瓶颈的分层投机解码技术

在人工智能领域&#xff0c;大型语言模型&#xff08;LLMs&#xff09;的长序列生成能力一直是研究的热点。然而&#xff0c;随着模型规模的增长&#xff0c;推理过程中的内存和计算瓶颈成为了限制其应用的主要障碍。为了解决这一问题&#xff0c;Carnegie Mellon University和…

[数据集][目标检测]盲道检测数据集VOC+YOLO格式2173张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2173 标注数量(xml文件个数)&#xff1a;2173 标注数量(txt文件个数)&#xff1a;2173 标注…

网络安全快速入门(十五)(下)手动创建用户及su,sudo命令

15.8 序言 前面我们已经大概了解了创建用户一些相关文件&#xff0c;接下来我们来手动创建用户&#xff0c;话不多说&#xff0c;我们直接开搞&#xff01;&#xff01;&#xff01; 15.9 手动创建用户&#xff1a; 一般来讲&#xff0c;我们创建用户通过useradd和passwd命令来…

如何合理使用群发短信呢?(短信接口JSON实例)

随着时代的发展&#xff0c;越来越多的营销推广也开始有线下转移到了线上&#xff0c;短信也变成了企业与用户之间交流沟通的桥梁&#xff0c;那么这么多的企业选择使用短信平台&#xff0c;到底群发短信好不好用呢&#xff1f;今天乐讯通短信平台就为大家来介绍一下群发短信营…

3D Gaussian Splatting for Real-Time Radiance Field Rendering

辐射场方法最近在基于多张照片或视频进行新视角合成方面取得了革命性进展。然而&#xff0c;实现高视觉质量仍然需要耗时且计算成本高的神经网络&#xff0c;而最近的快速方法不可避免地在速度和质量之间进行了权衡。对于无界和完整的场景&#xff08;而不是孤立的物体&#xf…

MacOS_奇安信天擎卸载指南,无需管理员密码

背景 奇安信天擎是一款基于云端的终端安全管理软件,在某些情况下,用户可能需要卸载该软件,例如 1、入职企业后使用的是自己的电脑,离职后监控软件还在 2、自己无意下载的软件或被病毒感染后强制下载的垃圾软件 3、员工看不惯企业监控自己的这个行为,使用技术手段屏蔽企业…

微信小程序 画布canvas

属性说明 属性类型默认值必填说明最低版本typestring否指定 canvas 类型&#xff0c;支持 2d (2.9.0) 和 webgl (2.7.0)2.7.0canvas-idstring否canvas 组件的唯一标识符&#xff0c;若指定了 type 则无需再指定该属性1.0.0disable-scrollbooleanfalse否当在 canvas 中移动时且…

python中的函数递归

函数递归&#xff0c;就是一个函数&#xff0c;自己调用自己。 如上图所示&#xff0c;是一段通过定义函数&#xff0c;编写函数体来实现for循环。实现的是从1到n的累乘。即求n的阶乘&#xff0c; 如上图所示&#xff0c;是一段函数的递归来实现1到n的累乘操作&#xff0c;将1*…

问题:前肢的前方称() #微信#经验分享#微信

问题&#xff1a;前肢的前方称&#xff08;&#xff09; A . 掌侧 B . 跖侧 C . 背侧 D . 胫侧 E . 桡侧 参考答案如图所示

数学模型:操作系统中FCFS、SJF、HRRN算法的平均周转时间比较 c语言

摘 要 研究目的&#xff1a;比较操作系统中进程调度FCFS、SJF、HRRN算法的平均周转时间和带权周转时间的大小关系。 研究方法&#xff1a;在建模分析时&#xff0c;分别举4个进程的例子&#xff0c;1个进程用两个字母分别表示到达时间和执行时间。分两种极端情况&#xff0c…