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

JavaScript键盘事件

news 2025/12/17 6:57:11

目录

一、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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/12/16 3:57:54

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/12/11 23:45:42

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/12/13 8:43:37

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/12/15 15:10:54

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/12/15 16:46:49

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/11/26 23:56:17

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/12/5 10:33:22