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

JavaScript键盘事件

news 2025/9/14 0:22:29

一、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：按下键盘上的任意键时触发。二、keyup：释放键盘上的任意键时触发。三、keypress：在按下并释放能够产生字符的键时触发（不包括功能键等）。四、input：在文本输入框或可编辑元素的内容…...

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

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

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

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

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

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

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

ChatGTP全景图 | 背景+技术篇

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

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

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

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

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

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

摘要本次设计内容是基于Springboot的旅游系统的设计与实现，采用B/S三层架构分别是Web表现层、Service业务层、Dao数据访问层，并使用Springboot，MyBatis二大框架整合开发服务器端，前端使用vue，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打包的过程： 在webpack的配置文件里面编写rules，type类型有多种，每个都有自己的作用，想要把小内存的图片转成bas…...

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

进程控制(Linux)

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

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

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

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

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

又名管道和无名管道

一、进程间通信（IPC，InterProcess Communication） 概念：就是进程和进程之间交换信息。常用通信方式无名管道（pipe） 有名管道 （fifo） 信号（signal） 共…...

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

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

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

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

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

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

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

JavaScript表单事件(下篇)

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

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

机器学习 | SVD奇异值分解

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

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

chatgpt赋能python：Python取值：介绍

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

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

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

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

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

Loki 日志收集系统

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

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

uCOSii信号量的作用

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

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

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 行为变更：所有应用 https://developer.andr…...

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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/9/9 21:41:05

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/9/12 13:01:46

JVM垃圾回收机制全解析

Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2025/9/10 3:57:22