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.mfbz.cn/a/692198.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

matplotlib 动态显示梯度下降过程

文章目录 简介曲线下降曲面下降 简介 梯度下降是一种优化算法&#xff0c;常用于寻找函数的最小值或最大值。它通过迭代更新参数的方式逐步减小&#xff08;或增大&#xff09;目标函数的值&#xff0c;直到达到某个停止条件为止。梯度下降的基本思想是沿着目标函数的负梯度方…

声量2024 | 脱离『生活监狱』——对部分主流价值的质疑与冒犯

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / 阿那亚 联合制作 / 声量The Power of Voice 特别鸣谢 / 深夜谈谈播客网络 本期节目录制于第二届「声量The Power of Voic…

基于 Delphi 的前后端分离:之三,使用 HTMX

# 前请提要 基于 Delphi 的前后端分离&#xff1a;之一_delphi 后台vue-CSDN博客 基于 Delphi 的前后端分离&#xff1a;之二_后端 框架 delphi-CSDN博客 # 发现一个非常好的前端框架 - HTMX 这里仍然使用之二里面提到的页面模板&#xff0c;但采用 HTMX 来和后端交互&#…

项目-基于LangChain的ChatPDF系统

问答系统需求文档 一、项目概述 本项目旨在开发一个能够上传 PDF 文件&#xff0c;并基于 PDF 内容进行问答互动的系统。用户可以上传 PDF 文件&#xff0c;系统将解析 PDF 内容&#xff0c;并允许用户通过对话框进行问答互动&#xff0c;获取有关 PDF 文件内容的信息。 二、…

python中的函数递归

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

思维,CF1575K - Knitting Batik

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1575K - Knitting Batik 二、解题报告 1、思路分析 诈骗题&#xff0c;上面…

变声器软件免费版有哪些?国内外12大热门变声器大盘点!(新)

变声软件是一种人工智能AI音频处理工具&#xff0c;允许用户实时修改自己的声音或改变预先录制的音频。这些软件解决方案可提供不同的效果&#xff0c;如改变声音的音调或速度&#xff0c;或将我们的声音转换成其他人或其他东西的声音&#xff0c;如名人、卡通人物、机器人或不…

C++开源项目:pathcopycopyV20源码及运行程序

PathCopyCopy 是一个开源的 Windows 资源管理器扩展项目&#xff0c;旨在为用户提供一个更加高效、便捷的文件路径复制和管理工具。以下是关于 PathCopyCopy 开源项目的详细介绍&#xff1a; 1. 项目概述 2. 项目技术分析 3. 项目功能 4. 项目特点 5. 项目应用场景 6. 项目…

记一次源码部分丢失后补救过程

起因 最近植物大战僵尸杂交版玩的入迷&#xff0c;写了一个“神奇”小工具&#xff0c;来辅助游戏。用Git新建一个库&#xff0c;想把代码备份到GitHub&#xff0c;结果push错库了&#xff0c;无奈reset&#xff0c;结果把本地项目一起reset了&#xff0c;结果就是源代码丢失。…

服务器数据恢复—服务器raid5上层zfs文件系统数据恢复案例

服务器数据恢复环境&故障&#xff1a; 一台某品牌X3650M3服务器&#xff0c;服务器中有一组raid5磁盘阵列&#xff0c;上层采用zfs文件系统。 服务器未知原因崩溃&#xff0c;工作人员排查故障后发现服务器的raid5阵列中有两块硬盘离线导致该阵列不可用&#xff0c;服务器内…

springboot报错:Failed to start bean ‘documentationPluginsBootstrapper‘

项目场景&#xff1a; springboot项目启动时报错 问题描述 具体报错信息&#xff1a; 可能原因分析&#xff1a; 1、SpringFox的版本与Spring Boot的版本不兼容。解决这个问题&#xff0c;你可能需要检查你正在使用的SpringFox和Spring Boot的版本&#xff0c;确保它们是兼容…

Python01 -分解整包数据到各个变量操作和生成器

Python 的星号表达式可以用来解决这个问题。比如&#xff0c;你在学习一门课程&#xff0c;在学期末的时候&#xff0c;你想统计下家庭作业的平均成绩&#xff0c;但是排除掉第一个和最后一个分数。如果只有四个分数&#xff0c;你可能就直接去简单的手动赋值&#xff0c;但如果…

Java Web学习笔记24——Vue项目开发流程

import是引入文件。 export是将对象导出为模块。 new Vue({ router, router: h > h(App) }).$mount(#app) App.vue: vue的组成文件以.vue结尾&#xff0c;每个组件由三个部分组成&#xff1a;<template>、<script>、<style>。 <template><d…

【MMU】——页表映射示例

文章目录 页表映射示例一级页表二级页表二级页表的优势页表映射示例 一级页表 上图一级页表中假设以 4KB 物理页为映射单位,一个进程 4GB 的虚拟地址空间需要:4GB/4KB = 1MB 个页表项,每个页表项目占用 4 个字节所以每个一级页表需要 4MB 的存储空间,每个进程需要 4MB 的内…

【教学类-36-07】20240608动物面具(通义万相)-A4大小7图15手工纸1图

背景需求&#xff1a; 风变的AI对话大师一年到期了&#xff0c;也没有看到续费的按钮。不能使用它写代码了。 MJ早就用完了&#xff0c;最后480次&#xff0c;我担心信息课题会用到它生图&#xff0c;所以不敢用。 最近探索其他类似MJ的免费出图工具——找到了每天给50张免费图…

Django 连接mysql数据库配置

1&#xff0c;提前创建注册的app1应用 Test/Test/settings.py python manage.py startapp app1 2&#xff0c;配置mysql数据库连接 Test/Test/settings.py DATABASES {default: {ENGINE: django.db.backends.mysql,# 数据库名字NAME: db1,# 连接mysql数据库用户名USER: ro…

如何在Coze中实现Bot对工作流的精准调用(如何提高Coze工作流调用的准确性和成功率)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 工作流(workflow)📒📝 创建设计工作流📝 添加工作流📝 调用工作流⚓️ 相关链接 ⚓️📖 介绍 📖 在使用Coze平台创建智能Bot时,您可能会遇到一个常见问题:即便添加了正确的工作流,Bot却没有按照预期调用它们。…

国产操作系统上给virtualbox中win7虚拟机安装增强工具 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;国产操作系统上给virtualbox中win7虚拟机安装增强工具 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在国产操作系统上给win7虚拟机安装virtualbox增强工具的文章。VirtualBox增强工具&#xff08;Guest Additions&a…

45-2 waf绕过 - XSS 绕过WAF方法

环境准备: 43-5 waf绕过 - 安全狗简介及安装-CSDN博客然后安装pikachu靶场:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客打开pikachu靶场 http://127.0.0.1/pikachu-master/vul/xss/xss_reflected_get.php 使用常见payload被安全狗拦截…

【Python】解决Python报错:AttributeError: ‘list‘ object has no attribute ‘shape‘

​​​​ 文章目录 引言1. 错误详解2. 常见的出错场景2.1 使用列表代替NumPy数组2.2 错误的数据类型转换 3. 解决方案3.1 确保使用NumPy数组3.2 检查数据类型 4. 预防措施4.1 使用类型注解4.2 编写单元测试 结语 引言 在使用Python进行数据处理或科学计算时&#xff0c;可能会…