当前位置： 首页 > news >正文

Vue键盘事件的使用

news 2026/2/8 10:14:13

前言

在vue中，我们经常会用到键盘事件，不管是我们按下某个键，其实都是一次键盘事件的调用，下面就介绍下Vue中的键盘事件

先写一段代码，这里我选择的键盘事件是keyup,当然用keydown也是没问题的

在这里插入图片描述

在这里插入图片描述

问题来了，什么按键都能触发事件，我们期望的是只能按下回车键才能打印输入的值， 那么：如何判断回车呢？

传统方式判断案件编码

最原始的办法，就是判断按键编码

           <input type="text" placeholder="按下回车提示输入"@keyup="showInfo">showInfo(e){// 如果按键没有按回车，就不打印日志 13就是回车键的编码if(e.keyCode!==13){return;}console.log(e.target.value)}

在这里插入图片描述

查看页面，我们发现功能已经实现了，我们输入内容必须按下回车，才能打印日志，按其他键都不好使

在这里插入图片描述

vue判断案件编码

在vue中，我们不用亲自判断按键编码，我们只需要在事件后面跟上修饰.enter就代表回车了

 <input type="text" placeholder="按下回车提示输入"@keyup.enter="showInfo">

在这里插入图片描述

在这里插入图片描述

vue中9个按键别名

通常称enter为别名，vue给按键都起了别名，一共有九个：
回车:enter
删除(退格):delete
退出:esc
空格:space
换行:tab(特殊，必须配合keydown使用)
上:up
下:down
左:left
右:right

vue自定义绑定按键

如果我们想要绑定的按键不在vue提供的9个按键内，那该怎么办呢？比如我就想要用CapsLock(切换大小写)

首先要知道：键盘上任意的一个按键都有自己的按键和编码

我们可以通过key和keyCode分别获取案件名称和对应的编码

在这里插入图片描述

按下键盘的caps，看到控制台提示按键叫CapsLock，对应的编码为20

在这里插入图片描述

多个单词按键特殊处理

上面我们已经知道了，大小写的按键叫CapsLock,那么我们直接使用,CapsLock是否就能直接限制只能大小写按键呢？

在这里插入图片描述

答案是否定的，按下caps切换大小写没有任何反应

在这里插入图片描述

这里就要强调下了，在vue中这种多个单词的情况下，不能写原生的按键名称，要把首字母的大写全部换成小写，并且直接用-进行拼接

<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">

在这里插入图片描述

再次测试解决问题，这种情况较少，我们需要格外注意

在这里插入图片描述

不是全部的按键都能绑定事件的，个别特殊按钮也是不行的

5个特殊按键

在一些按键中，因为特殊的机制，需要我们特殊处理，我们简单介绍下

tab按键

我们都知道，tab按键可以转移光标，这个按键比较特殊，我们不能直接使用tab去绑定事件，不然会发现是无效的，只会切换光标

在这里插入图片描述

在这里插入图片描述

所以当使用tab的时候，不应该使用keyup,应该使用keydown

在这里插入图片描述

发现虽然光标已经移走了，但是已经实现了我们的需求

在这里插入图片描述

ctrl,alt,shift,meta(window)按键

这四个按键我们一般称为系统修饰键(用法比较特殊)，我们一般使用keydown而不是keyup按键

1 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能触发

2 配合keydown使用：正常触发事件

如果我们非要用keyup事件，需要配合一个其他按键，任意的都行，我们以ctrl为例

在这里插入图片描述

我这里按的是ctrl+Q 触发事件

在这里插入图片描述

如果是使用keydown，就没有这么麻烦了，我们直接按下ctrl即可

在这里插入图片描述

我这里只按下了ctrl

在这里插入图片描述

通过键玛绑定按键事件

上面我们的案例都是绑定按键名，我们知道每一个按键都有对应的键码，我们可以通过键码去绑定事件，我这里以enter(回车)为例，它的键码是13

在这里插入图片描述

也是没有任何问题的

在这里插入图片描述

但是通过键码绑定按键事件的方式已经不推荐使用了,原因如下

部分浏览器已经不支持按键编码绑定事件的格式的，而且这种方式正常被废除，不同的电脑的按键有可能是不同的，也会造成不必需要的麻烦

所以我们应该少用甚至不用这种方式，应该使用按键名称绑定事件

在这里插入图片描述

自定义按键别名

我们上述使用的按键名称，比如enter回车，都是vue帮我们定义的，我们也可以自定义一些别名

比如我不想用enter，就想叫huiche，这时候怎么处理呢？

其实vue也给我们提供了解决方法，我们可以使用Vue.config.keyCodes去定义，语法如下

  // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键Vue.config.keyCodes.huiche=13

在这里插入图片描述

按下enter回车键，效果一样的

在这里插入图片描述

但是这种方式也是不推荐的，一般vue给我们提供的别名就够用了，代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><h2>欢迎学习：{{name}}</h2><input type="text" placeholder="按下回车提示输入" @keydown.huiche ="showInfo"></div> <script type="text/javascript">Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键const vm=new Vue({el:'#root',data:{name:'vue'},methods:{showInfo(e){            console.log(e.target.value)}   }}) </script>
</body></html>

多个按键拼接使用

这时候有个需求，必须是按下ctrl+y只会才能打印日志，那么这时候我们可以这样，在ctrl后拼接y

 // ctrl+y一起按 <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y ="showInfo">

在这里插入图片描述

发现没有问题，只能是ctrl+y才会触发事件打印日志

在这里插入图片描述

相关文章：

Vue键盘事件的使用

前言 在vue中&#xff0c;我们经常会用到键盘事件&#xff0c;不管是我们按下某个键&#xff0c;其实都是一次键盘事件的调用&#xff0c;下面就介绍下Vue中的键盘事件 先写一段代码&#xff0c;这里我选择的键盘事件是keyup,当然用keydown也是没问题的 问题来了&#xff0c;…...

编程日记 2023/4/25 22:47:39

抓包工具fiddler详细使用教程

各位做测试的同学想必对抓包工具fiddler并不陌生&#xff0c;但是很多同学可能没有总结过它的用法&#xff0c;下面我总结了fiddler一些常用的用法。 Web端抓包配置 打开Fiddler&#xff0c;Tools -> Fiddler Options -> HTTPS 配置完后记得要重启Fiddler 选中Decrpt …...

编程日记 2023/4/25 11:21:36

raspberry Pi 连接蓝牙(小爱同学)

参数valueraspberry pi MOdel4B&#xff0c;4Gbbluetooth MOdel小爱同学writeTime2023年 2月11日 下午13&#xff1a;14分raspberry System ModelLinux raspberrypi 5.15.61-v8 #1579 SMP PREEMPT Fri Aug 26 11:16:44 BST 2022 aarch64 GNU/Linux 连接蓝牙 请在小爱同学app上…...

编程日记 2023/4/25 11:21:34

解决launch:program .exe does not exist

二. 程序的运行和调试 1.launch.json 复制下列代码至launch.json&#xff0c;并根据指导做出相对/绝对路径修改 用 IntelliSense 了解相关属性。 {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.micros…...

编程日记 2023/4/25 11:21:31

ETL --事实表

每一个事实表通过表的粒度来定义。事实表的粒度是事件度量的定义。我们必须至始至终按照度量如何在 现实世界中理解来规定事实表的粒度。 所有的事实表包含了一组关联到维表的外键&#xff0c;而这些维表提供了事实表度量的上下文。大多数的事实表还 包括了一个或者多个数值型…...

编程日记 2023/4/25 22:47:36

手工数据采集耗时耗力？Smartbi数据填报实现数据收集分析自动化

企业在日常经营管理过程中&#xff0c;往往需要收集很多内外部的信息&#xff0c;清洗整理后再进行存储、分析、呈现、决策支持等各种作业&#xff0c;如何高效收集结构化数据是企业管理者经常要面对的问题。传统手工的数据采集方式不仅耗费了大量人力时间成本&#xff0c;还容…...

编程日记 2023/4/25 11:21:29

应用实战｜微信小程序开发示例--多人聊天互动空间

“超能力”数据库&#xff5e;拿来即用&#xff0c;应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库&#xff08;表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维&#xff09;&#xff0c;很大地降低开发者的使用门槛。 本示例是…...

编程日记 2023/4/25 11:21:26

css：使用filter和backdrop-filter实现高斯模糊效果

背景 今天接到一个需求是&#xff0c;使用高斯模糊的效果对一个页面进行模糊处理&#xff0c;正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说明&#xff1a; 该 API 是一个过滤器&#xff0c;不仅能实现高斯模糊&#xff0c;还有很多比如颜色偏移、…...

编程日记 2023/4/25 22:47:33

科技大势怎么看 2023怎么干？

2023年&#xff0c;科技的走向依旧是世界各国的关注重点&#xff0c;各国在纷纷设立自己的科技战略目标外&#xff0c;还在潜心研究不同技术领域的科技趋势&#xff0c;试图通过科技占据国际竞争的制高点。 随着我国深入实施创新驱动发展战略&#xff0c;推动产业结构优化升级&…...

编程日记 2023/4/25 22:47:27

盘点曾经很火但消失了的8个软件

目录 1、飞信 3、暴风影音 4、千千静听 5、虾米音乐 6、快车下载 7、人人网 8、QQ农场 今天小编给大家分享曾经很火但消失了的8个软件&#xff0c;你都用过吗&#xff1f; 1、飞信 飞信是中国移动通信集团公司推出的一款短信、语音、视频通信应用程序。它于2007年推出&a…...

编程日记 2023/4/25 3:02:42

安卓 Frament + ViewPager使用示例

1. 组成架构 整个架构被包在一个外部Fragment之中&#xff0c;也可以放在一个Activity之中&#xff0c;随意。外部的fragment包含了两个组件&#xff0c;即途中的ViewPager和TabLayoutViewPager要套上一个FragmentStatePagerAdapter &#xff0c;适配器负责new出一个个fragment…...

编程日记 2023/4/25 22:47:23

【银行测试】必看的四类题型：这可是最经典的一套题目了

目录&#xff1a;导读 一、根据题目要求写出具体LINUX操作命令 二、JMETER题目 三、根据题目要求写出具体SQL语句 四、测试案例设计题 金三银四面试面对大厂面试官提问&#xff0c;如何回答&#xff1a;花3天背完这100道软件测试面试题&#xff01;银行测试的offer还不是手…...

编程日记 2023/4/25 22:47:20

跨源资源共享（CORS）-亲测理解，以及对http的状态，参数的理解和使用，对预检请求的触发和解决

跨源资源共享&#xff08;CORS&#xff09;-亲测理解&#xff0c;以及对http的状态&#xff0c;参数的理解和使用 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的…...

编程日记 2023/4/25 22:47:17

学生使用的台灯该怎么选择？2023适合学生房间的灯推荐

随着社会的进步发展&#xff0c;我们的生活水平越来越高&#xff0c;很多家庭的孩子都开始使用台灯这种家居产品&#xff0c;对于学习任务繁重的他们来说&#xff0c;台灯确实可以起到保护眼睛、提高学习专注度的作用。那么不知道朋友们是否了解过&#xff0c;台灯该怎么选择呢…...

编程日记 2023/4/25 22:47:15

23种设计模式-桥接模式（安卓应用场景介绍）

概念 桥接模式是一种结构型设计模式&#xff0c;它通过将抽象与其实现分离来解耦。它使用接口&#xff08;抽象类&#xff09;作为桥梁&#xff0c;将一个抽象类与其实现类的代码分别独立开来&#xff0c;从而使它们可以各自独立地变化。桥接模式的核心思想是“组合优于继承”…...

编程日记 2023/4/25 22:47:12

2021牛客OI赛前集训营-提高组（第四场） T3快速访问

2021牛客OI赛前集训营-提高组&#xff08;第四场&#xff09; 题目大意 有一棵n1n1n1个节点的树&#xff0c;根节点为0。给你一个kkk&#xff0c;定义集合Si{j∈Z∣max⁡(1,i−k)≤j<i}∪{0}S_i\{j\in Z|\max(1,i-k)\leq j<i\}\cup\{0\}Si​{j∈Z∣max(1,i−k)≤j<i…...

编程日记 2023/4/25 22:47:09

【大数据是什么】

大数据是什么大数据是做什么的&#xff1f;大数据主要有哪些职位 &#xff1f;大数据运维工程师数据仓库开发工程师ETL工程师大数据开发工程师BI工程师算法工程师大数据平台开发工程师大数据架构师讲述一下自己的大数据学习之路大数据是做什么的&#xff1f; 2014年&#xff0c…...

编程日记 2023/4/25 22:47:06

大数据 | centos7图形界面无法执行yum命令

大家好&#xff0c;今天是三八女神节了&#xff01; 你知道吗&#xff1f;世界上第一位电脑程序设计师是名女性&#xff0c;Ada Lovelace (1815-1852)。 她是一位英国数学家兼作家&#xff0c;第一位主张计算机不只可以用来算数的人&#xff0c;也发表了第一段分析机用的演算…...

编程日记 2023/4/25 22:47:04

三维人脸实践：基于Face3D的渲染、生成与重构 ＜一＞

face3d: Python tools for processing 3D face git code: https://github.com/yfeng95/face3d paper list: PaperWithCode 该方法广泛用于基于三维人脸关键点的人脸生成、属性检测&#xff08;如位姿、深度、PNCC等&#xff09;&#xff0c;能够快速实现人脸建模与渲染。推荐…...

编程日记 2023/4/25 22:47:01

Javascript 设计模式

设计模式的五大设计原则(SOLID)单一职责&#xff1a;一个程序只需要做好一件事。如果功能过于复杂就拆分开&#xff0c;保证每个部分的独立开放封闭原则:对扩展开放&#xff0c;对修改封闭。增加需求时&#xff0c;扩展新代码&#xff0c;而不是修改源代码。这是软件设计的终极…...

编程日记 2023/4/25 22:46:58

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/4 16:15:43

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/1/24 13:01:05

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23