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

JavaScript键盘事件

news 2025/11/2 0:42:44

目录

一、keydown：按下键盘上的任意键时触发。

二、keyup：释放键盘上的任意键时触发。

三、keypress：在按下并释放能够产生字符的键时触发（不包括功能键等）。

四、input：在文本输入框或可编辑元素的内容发生改变时触发（包括键盘输入、粘贴、剪切等）。

五、compositionstart：在开始进行中文输入时触发。

六、compositionupdate：在进行中文输入时，每输入一个字符时触发。

七、compositionend：在结束中文输入时触发。

本文章简单介绍一下，JavaScript里面的键盘事件。

一、keydown：按下键盘上的任意键时触发。

keydown事件在JavaScript中用于响应键盘按下键的操作。它常用于实现以下场景：

1.捕获用户的按键操作：可以通过监听keydown事件来捕获用户按下的键，并执行相应的操作。例如，可以通过监听keydown事件来检测用户按下了特定的快捷键，然后执行相应的功能。

2.表单输入控制：可以利用keydown事件对用户的输入进行控制。例如，可以监听keydown事件，判断用户按下的键是否是数字键或字母键，以限制输入内容只能是数字或字母。

Keydown事件实例：

<script type="text/javascript">document.addEventListener("keydown", function(event) {// 判断按下的键是否是回车键（键码为13）if(event.keyCode === 13) {// 执行相应的操作，例如提交表单或执行搜索功能console.log("Enter key pressed!");// 在这里可以添加具体的逻辑代码}});
</script>

二、keyup：释放键盘上的任意键时触发。

keyup事件在JavaScript中用于响应键盘释放键的操作。它常用于实现以下场景：

1．捕获用户的键盘释放操作：可以通过监听keyup事件来捕获用户释放的键，并执行相应的操作。例如，在游戏开发中，可以利用keyup事件来检测玩家释放了特定的按键，然后更新游戏状态或执行相应的动作。

2.表单输入控制：可以利用keyup事件对用户的输入进行实时控制和验证。例如，可以监听keyup事件，检测用户在输入框中释放键后的输入内容，并进行输入合法性检查或实时搜索等操作。

<script type="text/javascript">// 监听键盘的keyup事件document.addEventListener("keyup", function(event) {// 判断释放的键是否是回车键（键码为13）if(event.keyCode === 13) {// 执行相应的操作，例如提交表单或执行搜索功能console.log("Enter key released!");// 在这里可以添加具体的逻辑代码}});
</script>

三、keypress：在按下并释放能够产生字符的键时触发（不包括功能键等）。

keypress事件在JavaScript中用于响应键盘按键的操作，并在按下键时触发。它常用于实现以下场景：

1.监听用户的实时输入：可以通过监听keypress事件来获取用户实时输入的内容，并进行处理。例如，在一个即时聊天应用中，可以利用keypress事件实时获取用户的输入内容，并将其显示在聊天窗口中。

2.实现快捷键操作：可以利用keypress事件捕获用户按下特定的快捷键，执行相应的操作。例如，在一个文本编辑器中，可以使用keypress事件监听用户按下Ctrl+S组合键，实现快速保存文档的功能。

需要注意的是，keypress事件在一些特定的情况下可能无法捕获到所有的按键，例如功能键和组合键。在这些情况下，您可能需要结合其他事件（如keydown或keyup）来实现完整的键盘操作。

<script type="text/javascript">// 监听键盘的keypress事件document.addEventListener("keypress", function(event) {// 获取按下的键对应的字符var char = String.fromCharCode(event.which);// 显示用户的输入内容var userInput = document.getElementById("user-input");userInput.textContent += char;});
</script>

最后，当执行一次点击键盘按钮的行为时，以上三个事件的触发顺序为：

keydown -> keypress -> keyup

四、input：在文本输入框或可编辑元素的内容发生改变时触发（包括键盘输入、粘贴、剪切等）。

input事件在JavaScript中用于监听输入框（input）或文本区域（textarea）内容的实时变化。它常用于实现以下场景：

1．实时搜索提示：可以通过监听input事件来实现实时搜索提示功能。当用户在搜索框中输入内容时，每次输入都会触发input事件，并可以通过获取输入框的值进行搜索操作，并实时显示搜索结果。

2.表单验证：可以利用input事件来监听用户在表单输入框中输入内容的变化，并实时进行表单验证。例如，可以监听input事件检查密码强度，当用户输入密码时，实时显示密码强度的提示。

以下例子实现了当用户在输入框中输入内容时，实时统计输入字符的数量，并显示在页面上。

<body><input type="text" id="input-field"><div id="char-count"></div>
</body>
<script>var inputField = document.getElementById("input-field");var charCount = document.getElementById("char-count");inputField.addEventListener("input", function(event) {var inputValue = event.target.value;var count = inputValue.length;charCount.textContent = "字符数量：" + count;});
</script>

五、compositionstart：在开始进行中文输入时触发。

compositionstart事件在用户开始输入非直接字符（如中文输入法输入）时触发。它通常用于捕获输入法开始输入字符的时机，以便进行相关处理。

需要注意的是，中文输入监听事件的监听目前似乎仅适配微软自带的微软拼音输入法，像搜狗一类的第三方输入法并不能触发该事件.

下面是一个例子，当用户使用中文输入法输入时，监听compositionstart事件并在控制台打印提示信息：

<body><input type="text" id="input-field">
</body>
<script>var inputField = document.getElementById("input-field");inputField.addEventListener("compositionstart", function(event) {console.log("输入法开始输入字符");});
</script>

六、compositionupdate：在进行中文输入时，每输入一个字符时触发。

compositionupdate事件在用户正在输入非直接字符（如中文输入法输入）时触发。它通常用于捕获正在输入的字符以及相关信息的更新。

下面是一个例子，当用户使用中文输入法输入时，监听compositionupdate事件并在控制台打印输入的字符：

<body><input type="text" id="input-field">
</body><script>var inputField = document.getElementById("input-field");inputField.addEventListener("compositionupdate", function(event) {var inputText = event.data;console.log("正在输入字符: " + inputText);});
</script>

实际效果：

七、compositionend：在结束中文输入时触发。

compositionend事件在用户完成非直接字符（如中文输入法输入）的输入时触发。它通常用于捕获输入完成后的字符以及相关信息。

下面是一个例子，当用户使用中文输入法输入完成后，监听compositionend事件并在控制台打印输入的字符：

<body><input type="text" id="input-field">
</body><script>var inputField = document.getElementById("input-field");inputField.addEventListener("compositionend", function(event) {var inputText = event.data;console.log("输入完成的字符: " + inputText);});
</script>

 实际效果：

 

相关文章：

JavaScript键盘事件

目录 一、keydown&#xff1a;按下键盘上的任意键时触发。 二、keyup&#xff1a;释放键盘上的任意键时触发。 三、keypress&#xff1a;在按下并释放能够产生字符的键时触发&#xff08;不包括功能键等&#xff09;。 四、input&#xff1a;在文本输入框或可编辑元素的内容…...

编程日记 2023/6/4 11:34:59

opengl灯光基础：2.1 光照基础知识

光照&#xff1a; 光照以不同的方式影响着我们看到的世界&#xff0c;有时甚至是以很戏剧化的方式。当手电筒照射在物体上时&#xff0c;我们希望物体朝向光线的一侧看起来更亮。我们所居住的地球上的点&#xff0c;在中午朝向太阳时候被照得很亮&#xff0c;但随着地球的自转…...

编程日记 2023/6/4 11:29:57

大屏时代：引领信息可视化的新潮流

在信息时代的浪潮下&#xff0c;数据已经成为推动各行各业发展的重要动力。然而&#xff0c;海量的数据如何快速、直观地呈现给用户&#xff0c;成为了一个亟待解决的难题。在这样的背景下&#xff0c;可视化大屏应运而生&#xff0c;以其出色的表现力和交互性成为信息展示的佼…...

编程日记 2023/6/4 11:24:56

ChatGTP全景图 | 背景+技术篇

引言&#xff1a;人类以为的丰功伟绩&#xff0c;不过是开端的开端……我们在未来100年取得的技术进步&#xff0c;将远超我们从控制火种到发明车轮以来所取得的一切成就。——By Sam Altman 说明&#xff1a;ChatGPT发布后&#xff0c;我第一时间体验了它的对话、翻译、编程、…...

编程日记 2023/6/4 11:19:54

计算机专业学习的核心是什么？

既然是学习CS&#xff0c;那么在这里&#xff0c;我粗浅的把计算机编程领域的知识分为三个部分&#xff1a; 基础知识 特定领域知识 框架和开发技能 基础知识是指不管从事任何方向的软件工程师都应该掌握的&#xff0c;比如数据结构、算法、操作系统。 特定领域知识就是你…...

编程日记 2023/6/4 11:14:54

基于springboot地方旅游系统的设计与实现

摘 要 本次设计内容是基于Springboot的旅游系统的设计与实现&#xff0c;采用B/S三层架构分别是Web表现层、Service业务层、Dao数据访问层&#xff0c;并使用Springboot&#xff0c;MyBatis二大框架整合开发服务器端&#xff0c;前端使用vue&#xff0c;elementUI技术&…...

编程日记 2023/6/4 11:09:53

一些学习资料链接

组件化和CocoaPods iOS 组件化的三种方案_迷曳的博客-CSDN博客 CocoaPods 私有化 iOS组件化----Pod私有库创建及使用 - 简书 CocoaPods1.9.1和1.8 使用 出现CDN: trunk URL couldnt be downloaded: - 简书 cocoapod制作私有库repo - 简书 【ios开发】 上传更新本地项目到…...

编程日记 2023/6/4 11:04:52

Webpack打包图片-JS-Vue

1 Webpack打包图片 2 Webpack打包JS代码 3 Babel和babel-loader 5 resolve模块解析 4 Webpack打包Vue webpack5打包 的过程&#xff1a; 在webpack的配置文件里面编写rules&#xff0c;type类型有多种&#xff0c;每个都有自己的作用&#xff0c;想要把小内存的图片转成bas…...

编程日记 2023/6/4 10:59:50

进程控制(Linux)

进程控制 fork 在Linux中&#xff0c;fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 返回值&#xff1a; 在子进程中返回0&#xff0c;父进程中返回子进程的PID&#xff0c;子进程创建失败返回-1。 …...

编程日记 2023/6/4 10:54:49

C Primer Plus第十四章编程练习答案

学完C语言之后&#xff0c;我就去阅读《C Primer Plus》这本经典的C语言书籍&#xff0c;对每一章的编程练习题都做了相关的解答&#xff0c;仅仅代表着我个人的解答思路&#xff0c;如有错误&#xff0c;请各位大佬帮忙点出&#xff01; 由于使用的是命令行参数常用于linux系…...

编程日记 2023/6/4 10:49:48

又名管道和无名管道

一、进程间通信&#xff08;IPC&#xff0c;InterProcess Communication&#xff09; 概念&#xff1a;就是进程和进程之间交换信息。 常用通信方式 无名管道&#xff08;pipe&#xff09; 有名管道 &#xff08;fifo&#xff09; 信号&#xff08;signal&#xff09; 共…...

编程日记 2023/6/4 10:44:47

操作系统复习4.1.0-文件管理结构

定义 一组有意义的信息的集合 属性 文件名、标识符、类型、位置、大小、创建时间、上次修改时间、文件所有者信息、保护信息 操作系统向上提供的功能 创建文件、删除文件、读文件、写文件、打开文件、关闭文件 这6个都是系统调用 创建文件 创建文件时调用Create系统调用…...

编程日记 2023/6/4 10:39:45

【嵌入式烧录/刷写文件】-2.6-剪切/保留Intel Hex文件中指定地址范围内的数据

案例背景&#xff1a; 有如下一段HEX文件&#xff0c;保留地址范围0x9140-0x91BF内的数据&#xff0c;删除地址范围0x9140-0x91BF外的数据。 :2091000058595A5B5C5D5E5F606162636465666768696A6B6C6D6E6F70717273747576775F :2091200078797A7B7C7D7E7F808182838485868788898A…...

编程日记 2023/6/4 10:34:44

JavaScript表单事件(下篇)

目录 八、keydown: 当用户按下键盘上的任意键时触发。 九、keyup: 当用户释放键盘上的键时触发。 十、keypress: 当用户按下键盘上的字符键时触发。 十一、focusin: 当表单元素或其子元素获得焦点时触发。 十二、focusout: 当表单元素或其子元素失去焦点时触发。 十三、c…...

编程日记 2023/6/4 10:29:43

机器学习 | SVD奇异值分解

本文整理自哔哩哔哩视频&#xff1a;什么是奇异值分解SVD–SVD如何分解时空矩阵 &#x1f4da;奇异值分解是什么&#xff1f; M是原始矩阵&#xff0c;它可以是任意的矩阵&#xff0c;奇异值分解就是将它分解为三个矩阵相乘。U和V是方阵&#xff0c;∑是不规则矩阵&#xff0c;…...

编程日记 2023/6/4 10:24:42

chatgpt赋能python：Python取值：介绍

Python取值&#xff1a;介绍 Python是一种非常流行的高级编程语言&#xff0c;适用于各种任务&#xff0c;包括数据科学、机器学习、Web开发和自动化。它被广泛使用&#xff0c;因为它易于学习、易于使用、易于阅读和易于维护。Python中的取值对于程序员来说是一个极其有用的工…...

编程日记 2023/6/4 10:19:41

广播风暴的成因以及如何判断、解决

广播风暴&#xff08;broadcast storm&#xff09;简单的讲是指当广播数据充斥网络无法处理&#xff0c;并占用大量网络带宽&#xff0c;导致正常业务不能运行&#xff0c;甚至彻底瘫痪&#xff0c;这就发生了“广播风暴”。一个数据帧或包被传输到本地网段 &#xff08;由广播…...

编程日记 2023/6/4 10:14:40

Loki 日志收集系统

一.系统架构 二.组成部分 Loki 的日志堆栈由 3 个组件组成&#xff1a; promtail&#xff1a;用于采集日志、并给每条日志流打标签&#xff0c;每个节点部署&#xff0c;k8s部署模式下使用daemonset管理。 loki&#xff1a;用于存储采集的日志&#xff0c; 并根据标签查询日志流…...

编程日记 2023/6/4 10:09:39

uCOSii信号量的作用

uCOSii中信号量的作用&#xff1a; 在创建信号量时&#xff0c;Sem_EventOSSemCreate(1)用于分时复用共享资源&#xff1b; Sem_EventOSSemCreate(0)用于中断和任务间同步或任务之间的同步。 具体在使用时&#xff0c;需要灵活运用。在访问共享资源时&#xff0c;我喜欢用互…...

编程日记 2023/6/4 10:04:38

Android 13 版本变更总览

Android 13 总览 https://developer.android.google.cn/about/versions/13?hlzh-cn 文章基于官方资料上提取 Android 13 功能和变更列表 https://developer.android.google.cn/about/versions/13/summary?hlzh-cn 行为变更&#xff1a;所有应用 https://developer.andr…...

编程日记 2023/6/4 9:59:37

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/11/1 9:10:11

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/10/29 16:55:33

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/10/30 15:42:33

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

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

编程新知 2025/11/1 0:26:11

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/11/1 19:15:39

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/10/16 23:42:48

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/11/1 4:11:49

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/10/18 13:32:22

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36