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

事件类型——常见的键盘事件及应用

article 2026/2/5 15:27:27

事件类型——常见的键盘事件及应用

键盘事件是前端交互的重要组成部分，通过 keydown 和 keyup 可以精准监听用户的按键行为，结合 key 和 code 属性实现多样化的逻辑。在实际开发中，需根据场景选择合适的事件和属性，并注意兼容性和性能优化。

一、键盘事件基础：三种核心事件

1. keydown 事件

触发时机：

用户按下任意按键时触发（持续按住会重复触发）。

用途：

监听按键按下动作，常用于实时响应（如游戏控制、快捷键检测）。

示例：

<body><input type="text" id="input"><script>  const input = document.getElementById('input');  input.addEventListener('keydown', (event) => {console.log(`按下了 ${event.key} 键`);});</script>
</body>

2. keyup 事件

触发时机：

用户释放已按下的按键时触发。

用途：

监听按键释放动作，常用于处理最终输入（如搜索框输入完成后触发搜索）。

示例：

<body><input type="text" id="searchInput"><script>const searchInput = document.getElementById('searchInput');searchInput.addEventListener('keyup', (event) => {if (event.key === 'Enter') {console.log('触发搜索');}});</script>
</body>

3. keypress 事件（逐渐弃用，谨慎使用）

触发时机：

用户按下能产生字符的按键（如字母、数字，不包括功能键如 Shift、Enter）。

缺点：

兼容性差，且无法区分字符大小写（如 A 和 a 可能返回相同值），现代开发中推荐使用 keydown 或 keyup 替代。

二、事件对象属性：获取按键信息

1. key：按键的字符值（推荐使用）

返回用户输入的字符（如 ‘a’、‘1’、‘Enter’），受键盘布局和输入法影响。
示例：按下字母 A（小写键盘）返回 ‘a’，按下 Enter 返回 ‘Enter’。

2. code：按键的物理代码（推荐使用）

返回按键的物理位置代码（如 ‘KeyA’、‘Enter’），不受键盘布局和输入法影响，适合检测功能键（如 F1、方向键）。
示例：无论键盘布局如何，字母 A 对应的 code 始终是 ‘KeyA’，Enter 对应 ‘Enter’。

3. 过时属性：keyCode 和 which

keyCode 返回按键的 ASCII 码（如 A 是 65），但无法区分大小写和特殊字符，已被废弃。
现代开发中请使用 key 或 code。

三、实战示例：打造键盘操作反馈工具

需求：

创建一个输入框，实时显示用户按下和释放的按键信息（包括 key 和 code）。

步骤 1：HTML 结构

<!DOCTYPE html>
<html>
<head><title>键盘事件实战</title>
</head>
<body><input type="text" id="input" placeholder="输入内容..."><div id="log"></div>  <script src="script.js"></script>
</body>
</html>

步骤 2：JavaScript 逻辑（script.js）

const input = document.getElementById('input');
const log = document.getElementById('log');
// 监听按键按下事件
input.addEventListener('keydown', (event) => {log.innerHTML += `<div>按下：${event.key}（code: ${event.code}）</div>`;
});
// 监听按键释放事件
input.addEventListener('keyup', (event) => {log.innerHTML += `<div>释放：${event.key}（code: ${event.code}）</div>`;
});

效果：

输入框中每一次按键操作，都会在下方实时显示 key 和 code 的值。

四、进阶技巧：处理组合键和特殊功能

1. 检测组合键（如 Ctrl + C）

通过 event.ctrlKey、event.shiftKey、event.altKey 判断是否按下控制键：


input.addEventListener('keydown', (event) => {// 检测 Ctrl + Cif (event.ctrlKey && event.key === 'c') {console.log('触发复制操作');  }  // 检测 Shift + 字母（大写输入）  if (event.shiftKey && /[a-z]/.test(event.key)) {console.log('输入大写字母');  }
});

2. 阻止默认行为（如禁止输入特殊字符）

通过 event.preventDefault() 阻止浏览器默认操作：

input.addEventListener('keydown', (event) => {// 禁止输入数字  if (/[0-9]/.test(event.key)) {event.preventDefault(); // 阻止输入    alert('不能输入数字！');  }
});

五、注意事项

兼容性：keypress 事件在不同浏览器中表现不一致，优先使用 keydown 和 keyup。
key vs code：

key 用于获取用户输入的字符（如文本输入场景）。
code 用于检测物理按键（如游戏中的方向键控制）。

性能：持续触发的 keydown 可能导致高频事件，建议通过防抖（debounce）优化。

六、练习任务

实现一个搜索框，当用户按下 Enter 键时触发搜索功能。
禁止文本框输入特殊字符（如 !@#$%）。
检测 Ctrl + Shift + S 组合键，触发保存操作。

事件类型——常见的键盘事件及应用

事件类型——常见的键盘事件及应用键盘事件是前端交互的重要组成部分，通过 keydown 和 keyup 可以精准监听用户的按键行为，结合 key 和 code 属性实现多样化的逻辑。在实际开发中，需根据场景选择合适的事件和属性，并注意兼容性和…...

编程日记 2026/1/31 9:04:15

【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 的未来：从微服务到云原生的演进

<前文回顾> 点击此处查看合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、引子&…...

编程日记 2026/2/4 18:03:48

beego文件上传

1file.go 2html代码 3路由设置 beego.Router("/file/Upload", &controllers.FileUploadController{}, "post:Upload") 注意 1，得新建个upload文件夹 2，路由设置严格区分大小写。 biiego文件下载上传代码 github 觉得不错Star下...

编程日记 2026/2/2 9:11:37

2025-04-05 吴恩达机器学习5——逻辑回归(2)：过拟合与正则化

文章目录 1 过拟合1.1 过拟合问题1.2 解决过拟合 2 正则化2.1 正则化代价函数2.2 线性回归的正则化2.3 逻辑回归的正则化 1 过拟合 1.1 过拟合问题欠拟合（Underfitting） 模型过于简单，无法捕捉数据中的模式，导致训练误差和测试误…...

编程日记 2026/2/2 9:08:42

基于Python的图书借阅推荐系统设计与实现

【Python】基于Python的图书借阅推荐系统设计与实现 （完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介本项目基于Python语言和Django框架开发，旨在为用户提供一个高可靠、高便捷的图…...

编程日记 2026/2/2 9:09:45

数字与数学——常见面试算法题

目录数字统计问题符号统计阶乘0的个数溢出问题整数反转回文数进制问题七进制数进制转换数组实现加法数组实现整数加法字符串实现加法二进制加法幂运算求2的幂求3的幂求4的幂辗转相除法（之前博客有过详细推导） https…...

编程日记 2026/1/24 10:16:33

Lua：第1-4部分语言基础

1 Lua语言入门 1.1 程序段我们将 Lua 语言执行的每一段代码（例如，一个文件或交互模式下的一行）称为一个程序段 （ Chunk ） ，即一组命令或表达式组成的序列。 1.2 一些词法规范 Lua 语言中的标识符&#…...

编程日记 2026/2/2 9:09:35

2024版idea使用Lombok时报找不到符号

今天在springboot项目中使用Lombok的Builder注解，启动时居然报了找不到符号的错，如下图于是开始了漫长的寻找之路，首先去settings->Plugins中看自己的Lombok插件是否启动，发现确实是如此，然后看网上的教程去加上这…...

编程日记 2026/1/28 5:33:53

python中的sort使用

目录 sort()使用排序处理升序由小到大排序： sort与sorted 总结降序由大到小排序： key 参数详解按字符串长度升序排序按字符串第二个字符排序 sort()使用 list.sort(keyNone, reverseFalse) 功能：对列表原地排序（直接…...

编程日记 2026/2/4 20:57:28

构建macOS命令速查手册：基于Flask的轻量级Web应用实践

构建macOS命令速查手册：基于Flask的轻量级Web应用实践一、项目概述本文介绍一个基于Flask框架开发的macOS命令速查Web应用。该应用通过结构化的命令数据存储和响应式前端设计，为用户提供便捷的命令查询体验，具备以下特点： 六…...

编程日记 2026/2/2 9:11:38

APP的兼容性测试+bug定位方法

兼容性问题定位一、为什么会有兼容性问题？二、APP兼容性测试场景三、常见的一些兼容性bug0. 引言1. 常见兼容性bug（1）界面性问题（2）内存不足（3）网络问题（4）权限问题通过…...

编程日记 2026/1/30 16:28:13

开源 PDF.js 文件编辑操作

一、PDF.js PDF.js 是 Mozilla 基金会推出的一个使用 HTML5 构建的 PDF 阅读器，它完全使用 JavaScript 编写。作为 Firefox 浏览器的默认 PDF 查看器，PDF.js 具有强大的兼容性和稳定性。它不仅支持 PDF 文件的查看和渲染，还提供了丰富的交互…...

编程日记 2026/1/29 11:43:29

云资源合规基线：确保云环境安全与合规的完整指南

1. 引言随着越来越多的企业将其IT基础设施迁移到云端,确保云资源的安全性和合规性变得至关重要。云资源合规基线是一套最佳实践和标准,旨在帮助组织维护安全、高效且符合法规要求的云环境。本文将深入探讨云资源合规基线的各个方面,为IT管理者和安全专业人士提供全面的指导。…...

编程日记 2026/2/2 7:52:59

#SVA语法滴水穿石# （005）关于问号表达式（condition ? expr1 : expr2）

在 SystemVerilog 断言（SVA）中，问号表达式（condition ? expr1 : expr2）的语法和逻辑与 C 语言的三元条件运算符完全一致。它根据条件选择执行 expr1 或 expr2，常用于动态选择信号、序列或属性。 1. 基本语法 // 格式： condition ? true_expression : false_expressi…...

编程日记 2026/1/27 9:12:26

操作系统、虚拟化技术与云原生及云原生AI简述

目录操作系统基础操作系统定义操作系统的组成操作系统的分类 Linux操作系统特性虚拟化技术概述 CPU虚拟化内存虚拟化 I/O虚拟化虚拟化技术虚拟化平台管理工具容器容器与云原生：详细介绍容器的特点什么是云原生？ 云原生的特点容器与云原生的…...

编程日记 2026/2/2 9:09:41

springcouldalibaba5大组件

springcouldalibaba5大组件 Spring Cloud Alibaba 简介 Spring Cloud Alibaba 是阿里巴巴提供的一站式微服务解决方案，基于 Spring Cloud 框架，集成了阿里巴巴的分布式中间件技术。它通过简单的注解和少量配置，就能将 Spring Cloud 应用连接…...

编程日记 2026/2/2 5:25:42

opencv中mat深拷贝和浅拷贝

1. 浅拷贝（Shallow Copy） 特点： 共享数据内存，新对象和原对象指向同一块内存数据。修改任一对象的数据会影响另一个对象（因为内存共享）。高效（仅复制矩阵头信息，不复制实际数据&…...

编程日记 2026/1/31 14:24:04

深入理解 C++ 三大特性之一继承

欢迎来到干货小仓库!!! 今日的Commit 是明日的 Releasse，用持续交付的心态活成终身迭代的版本。 1.继承的定义 1.1定义格式 1.2继承关系和访问限定符 1.3继承基类成员访问方式的变化类成员/继承方式public继承protected继承private继承基类的public成员派生类的…...

编程日记 2026/2/5 12:53:34

类和对象的介绍

对象的本质是一种新的数据类型。类是一个模型，对象是类的一个具体化实例。为类创建实例也就是创建对象。一、类（class） 类决定一个对象将是什么样的（有什么属性、功能）。类和变量一样，有名字。 1.创建类 …...

编程日记 2026/2/2 9:09:30

`use_tempaddr` 和 `temp_valid_lft ` 和 `temp_prefered_lft ` 笔记250405

use_tempaddr 和 temp_valid_lft 和 temp_prefered_lft 笔记250405 以下是 Linux 系统中与 IPv6 临时隐私地址相关的三个关键参数 use_tempaddr、temp_valid_lft 和 temp_prefered_lft 的详细说明及协作关系： 📜 参数定义与功能参数作用默认值依赖关…...

编程日记 2026/1/30 19:42:18

LeetCode详解之如何一步步优化到最佳解法：20. 有效的括号

LeetCode详解系列的总目录（持续更新中）： LeetCode详解之如何一步步优化到最佳解法：前100题目录（更新中...）-CSDN博客 LeetCode详解系列的上一题链接： LeetCode详解之如何一步步优化到最佳解法…...

编程日记 2026/2/3 16:14:14

学习笔记，DbContext context 对象是保存了所有用户对象吗

DbContext 并不会将所有用户对象保存在内存中： DbContext 是 Entity Framework Core (EF Core) 的数据库上下文，它是一个数据库访问的抽象层它实际上是与数据库的一个连接会话，而不是数据的内存缓存当您通过 _context.Users 查询数据时&…...

编程日记 2025/11/14 18:49:10