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

Vue键盘事件的使用

news 2025/7/5 4:56:24

前言

在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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/6/25 22:42:56

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/7/5 4:16:59

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/6/23 6:42:53

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/7/4 8:12:13

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/5 2:51:25

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/6/23 7:26:01

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/7/4 21:35:36

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/7/3 7:15:14

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/6/21 10:07:27