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

二、（JS）JS中常见的键盘事件

news 2026/2/10 12:36:31

一、常见的键盘事件

  • onkeydown        某个键盘按键被按下
  • onkeypress        某个键盘按键被按下
  • onkeyup            某个键盘按键被松开

二、事件的执行顺序 onkeydown、onkeypress、onkeyup

  • down      事件先发生；
  • press      发生在文本被输入；
  • up          发生在文本输入完成；

怎么区分onkeydown， onkeypress？实际开发中并没有对这2个有严格的区分。

onkeydown 更侧重于按键动作本身，而 onkeypress 更注重实际字符的输入。如果你关心的是按键操作，如游戏控制或键盘快捷键，onkeydown 比较合适；如果你需要识别用户输入的文字，onkeypress 更适合。

onkeypress有可能按下键后没有松手（我自己理解press中文翻译是按压，代表还有压力嘛，所以有可能还没有松手），他会一直执行 onkeydown、onkeypress事件。

三、我们可以通过key和code来区分按下的键

  • code：“按键代码（“KeyA”，“ArrowLeft”等 ），特定于键盘上按键的物理位置。
  • key：字符（“A”， “a”等），对于非字符（non-character）的按键，通常具有与code相同的值。

那怎么获取？

答：event.key, event.code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><script>var inputEl = document.querySelector("input")inputEl.onkeydown = function () {console.log("keydown");}inputEl.onkeypress = function () {console.log("onkeypress");}inputEl.onkeyup = function (event) {console.log("onkeyup", event.key, event.code);}</script></body></html>

四、实战演练

需求1：点击按钮进行搜索。

需求2：敲我们的enter键也能触发搜索。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><button>搜索</button><script>var inputEl = document.querySelector("input")var btnEl = document.querySelector("button")// inputEl.onkeydown = function () {//   console.log("keydown");// }// inputEl.onkeypress = function () {//   console.log("onkeypress");// }// inputEl.onkeyup = function (event) {//   console.log("onkeyup", event.key, event.code);// }// 点击按钮进行搜索btnEl.onclick = function () {console.log("进行搜索", inputEl.value);}inputEl.onkeyup = function () {if (event.key === "Enter") {console.log("进行搜索", inputEl.value);}}</script></body></html>

 

需求3：我按个s键，获取输入框的焦点。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><button>搜索</button><script>var inputEl = document.querySelector("input")var btnEl = document.querySelector("button")// inputEl.onkeydown = function () {//   console.log("keydown");// }// inputEl.onkeypress = function () {//   console.log("onkeypress");// }// inputEl.onkeyup = function (event) {//   console.log("onkeyup", event.key, event.code);// }// 点击按钮进行搜索btnEl.onclick = function () {console.log("进行搜索", inputEl.value);}inputEl.onkeyup = function (event) {if (event.key === "Enter") {console.log("进行搜索", inputEl.value);}}// 按个s键，自动获取输入框的焦点。document.onkeyup = function (event) {if (event.code === "KeyS") {console.log("用户点击了s");inputEl.focus()}}</script></body></html>

相关文章：

二、（JS）JS中常见的键盘事件

一、常见的键盘事件 onkeydown 某个键盘按键被按下onkeypress 某个键盘按键被按下onkeyup 某个键盘按键被松开 二、事件的执行顺序 onkeydown、onkeypress、onkeyup down 事件先发生&#xff1b;press 发生在文本被输入&#xff1b;up …...

编程日记 2024/9/15 22:10:15

【CSS】样式水平垂直居中

行内元素&#xff1a; 如果被设置元素为文本、图片等行内元素时&#xff0c;水平居中是通过给父元素设置 text-align:center <body> <div class"txtCenter">我想要在父容器中水平居中显示。</div> </body>div是文本元素的父元素 因此我们对…...

编程日记 2024/9/15 22:07:12

深入理解数据分析的使用流程：从数据准备到洞察挖掘

数据分析是企业和技术团队实现价值的核心。 5 秒内你能否让数据帮你做出决策&#xff1f; 通过本文&#xff0c;我们将深入探讨如何将原始数据转化为有意义的洞察&#xff0c;帮助你快速掌握数据分析的关键流程。 目录 数据分析的五个核心步骤1. 数据获取常用数据获取方式 2. 数…...

编程日记 2024/9/15 22:06:11

CSS 响应式设计（补充）——WEB开发系列36

随着移动设备的普及&#xff0c;网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示&#xff0c;还要适应不同设备的特性。 一、响应式设计之前的灵活布局 在响应式设计流行之前&#xff0c;网页布局通常是固定的或流动的。固定布局使用固定…...

编程日记 2024/9/15 22:05:10

Qt常用控件——QDateTimeEdit

文章目录 QDateTimeEdit核心属性及信号时间计算器 QDateTimeEdit核心属性及信号 QDateEdit作为日期的微调框QTimeEdit作为时间的微调框QDateTimeEdit作为时间日期的微调框 它们的使用方式都是类似的&#xff0c;本篇以QDateTimeEdit作为示例 核心属性&#xff1a; 属性说明…...

编程日记 2024/9/15 22:03:55

什么是上拉，下拉？

上拉就是将引脚通过一个电阻连接到电源&#xff0c;作用&#xff1a;1.使IO口的不确定电平稳定在高点平&#xff0c;2、为了增加IO口拉电流的能力。 下拉就是将引脚通过一个电阻与GND相连&#xff0c;作用&#xff1a;1.从器件输出电流 2.当IO口为输入状态时&#xff0c;引脚的…...

编程日记 2024/9/15 22:02:30

76-mysql的聚集索引和非聚集索引区别

MySQL中的聚集索引和非聚集索引的主要区别在于它们的存储方式和使用方式。 聚集索引&#xff08;Clustered Index&#xff09;&#xff1a; 聚集索引的叶子页包含了行的全部数据。 每个表只能有一个聚集索引&#xff0c;因为一个表中的数据只能按照一种方式存储。 当你查询的…...

编程日记 2024/9/15 22:00:28

每日一题——第八十八题

题目&#xff1a;输入一个9位的无符号整数&#xff0c;判断其是否有重复数字 #include<stdio.h> #include<stdbool.h> #include<string.h> int main() {char num_str[10];printf("请输入一个9位数的无符号数&#xff1a;");scanf_s("%9d&quo…...

编程日记 2024/9/15 21:59:21

【创作活动】学习使用哪个编程工具让你的工作效率翻倍？

学习使用哪个编程工具让你的工作效率翻倍&#xff1f; 在日益繁忙的工作环境中&#xff0c;选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度&#xff0c;甚至让团队协作更加顺畅。那么&#xff0c;哪款编程…...

编程日记 2024/9/15 21:58:20

基于STM32C8T6的CubeMX：HAL库点亮LED

三个可能的问题和解决方法&#xff1a; 大家完成之后回来看&#xff0c;每一种改错误都是一种成长&#xff0c;不要畏惧&#xff0c;要快乐&#xff0c;积极面对&#xff0c;要耐心对待 STMCuBeMX新建项目的两种匪夷所思的问题https://mp.csdn.net/mp_blog/creation/editor/1…...

编程日记 2024/9/15 21:57:10

职业院校数据科学与大数据技术专业人工智能实训室建设方案

一、引言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;其在全球范围内的应用日益广泛&#xff0c;从智能交通、环境保护到公共安全、智能家居等多个领域均展现出巨大的潜力。然而&#xff0c;我国在人工智能领域的人才储备仍显不足&#xff0c;这已成为…...

编程日记 2024/9/15 21:56:03

JavaScript网页设计案例分析

JavaScript网页设计案例分析 随着互联网技术的发展&#xff0c;JavaScript 已经成为现代网页设计中不可或缺的一部分。从简单的页面交互到复杂的应用程序开发&#xff0c;JavaScript 都发挥着至关重要的作用。本文将探讨几个运用 JavaScript 进行网页设计的经典案例&#xff0…...

编程日记 2024/9/15 21:55:02

2024.9.15周报

一、题目信息 题目&#xff1a;Physics-informed neural networks for solving flow problems modeled by the 2D Shallow Water Equations without labeled data 链接&#xff1a;物理信息神经网络用于解决由二维浅水方程建模的流动问题&#xff0c;无需标记数据- ScienceDi…...

编程日记 2024/9/15 21:54:00

QT模型视图结构1

文章目录 Qt 模型视图结构概述(一)1、模型/视图结构基本原理2、模型3、视图4、代理5、简单实例 Qt 模型视图结构概述(一) ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据&#xff0c;视图组件显示模型中的数据&#xff0c;在视图组件里修改的数据会…...

编程日记 2024/9/15 21:52:59

Ubuntu20+Noetic+cartographer_ros编译部署

1 准备工作 &#xff08;1&#xff09;准备Ubuntu20系统。 &#xff08;2&#xff09;安装ROS系统,参考 https://blog.csdn.net/weixin_46123033/article/details/139527141&#xff08;3&#xff09;Cartographer相关软件包和源码下载&#xff1a; https://gitee.com/mrwan…...

编程日记 2024/9/15 21:51:58

linux-L3-linux 复制文件

linux 中要将文件file1.txt复制到目录dir中&#xff0c;可以使用以下命令 cp file1.txt dir/复制文件 cp /path/to/source/file /path/to/destination移动 mv /path/to/source/file /path/to/destination复制文件夹内的文件 cp -a /path/to/source/file /path/to/destinati…...

编程日记 2024/9/15 21:49:54

Kotlin：1.9.0 的新特性

一、概述 Kotlin 1.9.0版本英语官方文档 Kotlin 1.9.0 中文官方文档 The Kotlin 1.9.0 release is out and the K2 compiler for the JVM is now in Beta. Additionally, here are some of the main highlights: Kotlin 1.9.0版本已经发布&#xff0c;用于JVM的K2编译器现在…...

编程日记 2024/9/15 21:48:51

golang实现从服务器下载文件到本地指定目录

一、连接服务器&#xff0c;采用sftp连接模式 package middlewaresimport ("fmt""time""github.com/pkg/sftp""golang.org/x/crypto/ssh" )// 建立服务器连接 func Connect(user, password, host string, port int) (*sftp.Client, e…...

编程日记 2024/9/15 21:41:18

C++数据结构-树的概念及分类介绍（基础篇）

1.什么是树 树是数据结构中的一种&#xff0c;其属于非线性数据结构结构的一种&#xff0c;我们前文所提到的数据结构多数都是线性的&#xff0c;这也是较为简单的数据结构&#xff0c;而接下来的树与图均属于非线性数据结构&#xff0c;也是概念极多的一类。 树是由结点或顶…...

编程日记 2024/9/15 21:32:07

职场 Death Note

场景一 测试&#xff1a;哎&#xff0c;怎么会这样呢&#xff1f;时间没到&#xff0c;他怎么就变成这个样子了呢&#xff1f;一副大惊小怪&#xff0c;整个办公室都是他的声音 开发&#xff1a;对对对&#xff0c;我代码问题&#xff0c;别BB了。 你直接说这个地方不对&#…...

编程日记 2024/9/15 21:31:06

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2026/1/29 20:58:41

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/2/7 13:27:36

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/12/18 8:35:12