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

JavaScript表单事件(下篇)

news 文章来源：https://blog.csdn.net/zhangawei123/article/details/130910464 2025/5/11 8:17:33

目录

八、keydown: 当用户按下键盘上的任意键时触发。

九、keyup: 当用户释放键盘上的键时触发。

十、keypress: 当用户按下键盘上的字符键时触发。

十一、focusin: 当表单元素或其子元素获得焦点时触发。

十二、focusout: 当表单元素或其子元素失去焦点时触发。

十三、cut: 当用户剪切文本框或文本区域中的文本时触发。

十四、copy: 当用户复制文本框或文本区域中的文本时触发。

十五、paste: 当用户粘贴文本到文本框或文本区域时触发。

承接上篇内容，我们继续来说一下JavaScript常见的表单事件

八、keydown: 当用户按下键盘上的任意键时触发。

keydown事件在用户按下键盘上的任意键时触发，它适用于需要对键盘输入进行实时响应的场景。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>按键检测</title>
</head>
<body><input type="text" id="myInput" placeholder="按下任意键查看键码" /><script>var input = document.getElementById('myInput');input.addEventListener('keydown', function(event) {// 在按键按下时执行特定的操作var keyCode = event.keyCode;console.log('按下的键码：', keyCode);});</script>
</body>
</html>

在上述例子中，我们监听了文本输入框的keydown事件，并在事件处理函数中获取了按下的键码。通过event.keyCode属性，我们可以获得当前按下的键盘键码。在这个例子中，我们简单地在控制台输出了按下的键码。你可以根据具体需求，在keydown事件中添加自定义的操作，例如根据不同的键码执行不同的逻辑，处理特殊按键或快捷键等。

九、keyup: 当用户释放键盘上的键时触发。

keyup事件在用户释放键盘上的任意键时触发，它适用于需要对键盘输入进行实时响应的场景。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>按键检测</title>
</head>
<body><input type="text" id="myInput" placeholder="松开任意键查看键码" /><script>var input = document.getElementById('myInput');input.addEventListener('keyup', function(event) {// 在按键释放时执行特定的操作var keyCode = event.keyCode;console.log('释放的键码：', keyCode);});</script>
</body>
</html>

在上述例子中，我们监听了文本输入框的keyup事件，并在事件处理函数中获取了释放的键码。通过event.keyCode属性，我们可以获得当前释放的键盘键码。在这个例子中，我们简单地在控制台输出了释放的键码。你可以根据具体需求，在keyup事件中添加自定义的操作，例如根据不同的键码执行不同的逻辑，处理特殊按键或快捷键等。

十、keypress: 当用户按下键盘上的字符键时触发。

keypress事件在JavaScript中用于响应键盘按键的按下和持续按压操作，适用于表单输入和处理用户按键的场景。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head><title>表单键盘事件</title>
</head>
<body><form><input type="text" id="myInput" placeholder="在文本框中输入内容" /><button type="button" id="myButton">点击我</button></form><script>var input = document.getElementById('myInput');var button = document.getElementById('myButton');input.addEventListener('keypress', function(event) {// 按下键盘时实时响应console.log('按键编码：', event.keyCode);console.log('按键字符：', String.fromCharCode(event.keyCode));});button.addEventListener('click', function() {// 获取文本框中的值并进行操作var value = input.value;console.log('文本框的值：', value);});</script>
</body>
</html>

在这个例子中，我们在表单中的文本输入框上监听了keypress事件。每当用户按下键盘上的任意键时，事件处理函数会实时响应，并输出按键的编码和对应的字符。我们使用event.keyCode获取按键的编码，并使用String.fromCharCode(event.keyCode)将编码转换为对应的字符。

此外，我们还在表单中的按钮上监听了click事件。当用户点击按钮时，事件处理函数会获取文本框中的值，并进行操作。你可以根据实际需求，将按钮的点击操作替换为其他自定义的逻辑。

十一、focusin: 当表单元素或其子元素获得焦点时触发。

focusin事件在JavaScript中用于响应表单元素获取焦点的操作，包括表单元素本身以及其子元素。它与focus事件类似，但是具有冒泡特性，会在子元素获得焦点时也触发。

当使用JavaScript的focusin事件时，可以在以下几个场景中发挥作用：

  1. 1.表单验证：在表单中的输入字段获取焦点时，可以使用focusin事件进行实时验证用户输入的内容是否符合要求。例如，当用户点击输入框时，检查输入内容是否为空或是否满足特定格式要求。
  2. 2.自动完成/建议功能：当用户在输入框中输入内容时，可以使用focusin事件触发自动完成或建议功能，根据用户输入的部分内容提供相关的选项或建议。
  3. 3.自定义样式效果：通过使用focusin事件，可以实现自定义的样式效果，以突出显示当前获得焦点的表单元素。例如，改变输入框的背景色、边框样式或添加阴影效果等。
  4. 4.表单元素交互：在一个表单中，当用户切换焦点到不同的输入字段时，可以使用focusin事件来根据当前焦点所在的字段，动态显示或隐藏其他相关的内容或元素。
  5. 5.键盘快捷键：使用focusin事件可以监听表单元素的焦点变化，进而触发特定的键盘快捷键操作。例如，当用户在输入框中按下特定的快捷键时，可以执行相应的操作或触发特定的事件。

以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head><title>表单焦点事件</title>
</head>
<body><form><input type="text" id="myInput" placeholder="输入姓名" /></form><script>var input = document.getElementById('myInput');input.addEventListener('focusin', function() {console.log('表单元素获取焦点');input.style.backgroundColor = 'lightblue';});input.addEventListener('focusout', function() {console.log('表单元素失去焦点');input.style.backgroundColor = 'white';});</script>
</body>
</html>

十二、focusout: 当表单元素或其子元素失去焦点时触发。

当使用JavaScript的focusout事件时，可以在以下几个场景中发挥作用：

  1. 1.表单验证：在表单中的输入字段失去焦点时，可以使用focusout事件进行实时验证用户输入的内容是否符合要求。例如，当用户离开输入框时，检查输入内容是否为空或是否满足特定格式要求。
  2. 2.自动保存：当用户离开表单中的输入字段时，可以使用focusout事件来触发自动保存功能，将用户的输入内容保存到本地或远程服务器中，以防止数据丢失。
  3. 3.即时反馈：通过使用focusout事件，可以实现即时反馈功能，根据用户输入的内容或离开的字段，提供相关的反馈信息或显示验证结果。例如，在离开输入框时，检查输入内容的长度是否符合要求，并在页面上显示相应的提示。
  4. 4.输入协助：当用户离开输入字段时，可以使用focusout事件来提供输入协助功能。例如，检查用户输入的内容是否包含特定字符或格式，如果不符合要求，则提供建议或自动修正。

下面是一个简单的例子，演示了如何使用focusout事件验证输入框中的内容是否为空：

<!DOCTYPE html>
<html>
<head><title>Focusout Event Example</title>
</head>
<body><form><label for="name">Name:</label><input type="text" id="name" required><button type="submit">Submit</button></form><script>const nameInput = document.getElementById('name');nameInput.addEventListener('focusout', function(event) {if (nameInput.value.trim() === '') {alert('Name field cannot be empty!');}});</script>
</body>
</html>

在上述例子中，当用户离开输入框（name字段）时，focusout事件被触发。在事件处理程序中，我们检查输入框中的值是否为空，如果为空，则弹出提示框提醒用户输入姓名。这样可以实现对输入内容的即时验证。

十三、cut: 当用户剪切文本框或文本区域中的文本时触发。

cut事件在表单中的使用场景通常涉及到对用户剪切文本的操作进行处理或提供反馈。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>Cut Event Example</title>
</head>
<body><input type="text" id="input-field" placeholder="Enter text to cut"><script>const inputField = document.getElementById('input-field');inputField.addEventListener('cut', function(event) {const cutText = event.clipboardData.getData('text/plain');alert(`You have cut the text: ${cutText}`);});</script>
</body>
</html>

在上述例子中，我们创建了一个输入框（<input>元素），当用户剪切（cut）输入框中的文本时，cut事件会被触发。在事件处理程序中，我们使用event.clipboardData.getData('text/plain')来获取剪切的文本内容，并通过弹出框提供反馈，显示用户剪切的文本。

注意，cut、copy、paste事件均会在文本被剪切/复制/粘贴之前触发，因此可以在事件处理程序中获取到文本内容，并进行进一步的处理或提供相应的反馈。

十四、copy: 当用户复制文本框或文本区域中的文本时触发。

copy事件在表单中的使用场景通常涉及到对用户复制文本的操作进行处理或提供反馈。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>Copy Event Example</title>
</head>
<body><input type="text" id="input-field" placeholder="Enter text to copy"><script>const inputField = document.getElementById('input-field');inputField.addEventListener('copy', function(event) {const copiedText = inputField.value.substring(inputField.selectionStart, inputField.selectionEnd);alert(`You have copied the text: ${copiedText}`);});</script>
</body>
</html>

在上述例子中，我们创建了一个输入框（<input>元素），当用户复制（copy）输入框中的文本时，copy事件会被触发。在事件处理程序中，我们使:用:inputField.value.substring(inputField.selectionStart, inputField.selectionEnd)

来获取被复制的文本内容，并通过弹出框提供反馈，显示用户复制的文本。

十五、paste: 当用户粘贴文本到文本框或文本区域时触发。

paste事件在表单中的使用场景通常涉及到对用户粘贴文本的操作进行处理或提供反馈。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>Paste Event Example</title>
</head>
<body><input type="text" id="input-field" placeholder="Paste text here"><script>const inputField = document.getElementById('input-field');inputField.addEventListener('paste', function(event) {const pastedText = event.clipboardData.getData('text');alert(`You have pasted the text: ${pastedText}`);});</script>
</body>
</html>

在上述例子中，我们创建了一个输入框（<input>元素），当用户粘贴（paste）文本到输入框中时，paste事件会被触发。在事件处理程序中，我们使用event.clipboardData.getData('text')来获取粘贴的文本内容，并通过弹出框提供反馈，显示用户粘贴的文本。

请注意，由于安全性限制，对剪贴板数据的访问可能受到限制，因此在某些浏览器中，可能无法获取到粘贴的文本内容。

相关文章：

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

QT 设计ROS GUI界面订阅和发布话题

QT 设计ROS GUI界面订阅和发布话题 主要参考下面的博客 ROS项目开发实战&#xff08;三&#xff09;——使用QT进行ROS的GUI界面设计&#xff08;详细教程附代码&#xff01;&#xff01;&#xff01;&#xff09; Qt ROS 相关配置请看上一篇博客 首先建立工作空间和功能包&a…...

编程日记 2023/6/4 9:54:35

pandas数据预处理

pandas数据预处理 pandas及其数据结构pandas简介Series数据结构及其创建DataFrame数据结构及其创建 利用pandas导入导出数据导入外部数据导入数据文件 导出外部数据导出数据文件 数据概览及预处理数据概览分析利用DataFrame的常用属性利用DataFrame的常用方法 数据清洗缺失值处…...

编程日记 2023/6/4 9:49:33

Jupyter Notebook如何导入导出文件

目录 0.系统&#xff1a;windows 1.打开 Jupyter Notebook 2.Jupyter Notebook导入文件 3.Jupyter Notebook导出文件 0.系统&#xff1a;windows 1.打开 Jupyter Notebook 1&#xff09;下载【Anaconda】后&#xff0c;直接点击【Jupyter Notebook】即可在网页打开 Jupyte…...

编程日记 2023/6/4 9:44:32

Linux：/dev/tty、/dev/tty0 和 /dev/console 之间的区别

在Linux操作系统中&#xff0c;/dev/tty、/dev/tty0和/dev/console是三个特殊的设备文件&#xff0c;它们在终端控制和输入/输出过程中扮演着重要的角色。尽管它们看起来很相似&#xff0c;但实际上它们之间存在一些重要的区别。本文将详细介绍这三个设备文件之间的区别以及它们…...

编程日记 2023/6/4 9:39:31

Linux 上安装 PostgreSQL——Ubuntu

打开 PostgreSQL 官网 PostgreSQL: The worlds most advanced open source database&#xff0c;点击菜单栏上的 Download &#xff0c;可以看到这里包含了很多平台的安装包&#xff0c;包括 Linux、Windows、Mac OS等 。 Linux 我们可以看到支持 Ubuntu 和 Red Hat 等各个平台…...

编程日记 2023/6/4 9:34:30

合并两个有序链表（java）

leetcode 21题&#xff1a;合并两个有序链表 题目描述解题思路&#xff1a;链表的其它题型。 题目描述 leetcode21题&#xff1a;合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例&#xff1a; 输入&…...

编程日记 2023/6/4 9:29:29

KEYSIGHT是德DSOX4034A 示波器 350 MHz

KEYSIGHT是德DSOX4034A 示波器 350 MHz&#xff0c;是德4000 X 系列拥有一系列引以为傲的配置&#xff0c;包括采用了电容触摸屏技术的 12.1 英寸显示屏、InfiniiScan 区域触摸触发、100 万波形/秒捕获率、MegaZoom IV 智能存储器技术和标配分段存储器。 是德DSO-X4034A 主要特…...

编程日记 2023/6/4 9:24:28

局域网技术

共享信道的分配技术是局域网的核心技术&#xff0c;而这一技术又与网络的拓扑结构和传输介质有关。 拓扑结构&#xff1a; 1.总线型拓扑&#xff1a; 总线一种多点广播介质&#xff0c;所有的站点通过接口硬件连接到总线上。 传输介质主要是同轴电缆&#xff08;基带和宽带…...

编程日记 2023/6/4 9:19:27

Pixhawk无人机-ArduPilot 软件SITL仿真模拟飞行（SITL+MAVProxy）

1 引言 本人是先看了多个博客实现了&#xff1a;在ubuntu下建立完整的ardupilot开发环境。 该文是基于搭建完编译环境后&#xff0c;也就是搭建好ardupilot的仿真环境实现的。 在文章: 《Pixhawk无人机扩展教程(5)—SITL仿真模拟飞行&#xff1a;开发环境搭建》.中指出&#…...

编程日记 2023/6/4 9:14:26

vue实现深拷贝的方法

在 vue中&#xff0c;深拷贝是一个很有用的功能&#xff0c;在不改变原来对象状态的情况下&#xff0c;进行对象的复制。 但要实现深拷贝&#xff0c;需要两个对象具有相同的属性。如果两个对象不同&#xff0c;深拷贝也不能实现。 1.我们将变量A的属性赋给变量B&#xff0c;但…...

编程日记 2023/6/4 9:09:24

LAMP架构

文章目录 LAMP架构一.简述各组件的主要作用如下&#xff1a; 二.过程展示1.编译安装Apache httpd服务(1)关闭防火墙&#xff0c;将安装Apache所需软件包传到/opt目录下(2)安装环境依赖包(3)配置软件模块(4)编译及安装(5)优化配置文件路径&#xff0c;并把httpd服务的可执行程序…...

编程日记 2023/6/4 9:04:22

javascript基础七：说说你对Javascript中作用域的理解?

一、作用域 作用域&#xff0c;即变量&#xff08;变量作用域又称上下文&#xff09;和函数生效&#xff08;能被访问&#xff09;的区域或集合 换句话说&#xff0c;作用域决定了代码区块中变量和其他资源的可见性 举个粟子 function myFunction(){let name小爱同学 } undef…...

编程日记 2023/6/4 8:59:21

chatgpt赋能python：Python变量赋值

Python 变量赋值 在 Python 中&#xff0c;我们可以使用多种符号来给变量赋值。本文将介绍这些符号以及它们在编程中的应用。 等号&#xff08;&#xff09; 在 Python 中&#xff0c;我们最常用的符号是等号&#xff08;&#xff09;&#xff0c;它可以将一个值赋给一个变量…...

编程日记 2023/6/4 8:54:20

SAP-QM-物料主数据-质量管理视图字段解析

过账到质检库存&#xff1a;要勾选&#xff0c;否则收货后库存不进入质检库存HU检验&#xff1a;收货到启用HU管理的库位时产生检验批&#xff0c;例如某个成品物料是收货到C002库位&#xff0c;该库位启用了HU管理&#xff0c;那么此处要勾选。但是如果勾选了&#xff0c;却收…...

编程日记 2023/6/4 8:49:19

【Netty】一行简单的writeAndFlush都做了哪些事（十八）

文章目录 前言一、源码分析1.1 ctx.writeAndFlush 的逻辑1.2 writeAndFlush 源码1.3 ChannelOutBoundBuff 类1.4 addMessage 方法1.5 addFlush 方法1.6 AbstractNioByteChannel 类 总结 前言 回顾Netty系列文章&#xff1a; Netty 概述&#xff08;一&#xff09;Netty 架构设…...

编程日记 2023/6/4 8:44:18

STM32U575 DMA配置

起个摘要&#xff0c;后期维护 1、DMA原理&#xff1a;参考&#xff1a;【STM32】DMA原理&#xff0c;配置步骤超详细&#xff0c;一文搞懂DMA_dma配置_~Old的博客-CSDN博客 2、STM32U575的DMA资源&#xff1a; &#xff08;datasheet摘要&#xff09; 3、UART的使用 4、I2…...

编程日记 2023/6/4 8:39:17

14-Vue3快速上手

目录 1.Vue3简介2. Vue3带来了什么2.1 性能的提升2.2 源码的升级2.3 拥抱TypeScript2.4 新的特性 1、海贼王&#xff0c;我当定了&#xff01;——路飞 2、人&#xff0c;最重要的是“心”啊&#xff01;——山治 3、如果放弃&#xff0c;我将终身遗憾。——路飞 4、人的梦想是…...

编程日记 2023/6/4 8:34:16

Docker registry 搭建

1、安装 docker 环境 参考&#xff1a;https://mp.csdn.net/mp_blog/creation/editor/104673841 2、准备 registry 镜像 机器有外网访问权限&#xff0c;直接 docker pull registry 通过 docker images 查看本地镜像 3、启动 registry docker run -d -p 5000:5000 --rest…...

编程日记 2023/6/4 8:29:15

关于三维布尔运算的几点思考

目录 三维布尔运算概述三角网格布尔运算效率提升思考BSPTree方式优化 参考 三维布尔运算概述 三维布尔运算根据三维实体数据结构表达分为CSG布尔运算、Brep布尔运算、三角网格布尔运算等类型。这几种类型算法在不同情境下有不同的优势&#xff0c;根据情况进行选择。但这也不能…...

编程日记 2023/6/4 8:24:14

【03.04】大数据教程--html+css基础

当谈到大数据时&#xff0c;HTML和CSS可能并不是最相关的技术。HTML和CSS主要用于构建网页和应用程序的用户界面&#xff0c;而大数据则涉及处理和分析大规模数据集。但是&#xff0c;如果您想展示有关大数据的信息或结果&#xff0c;并在网页上呈现&#xff0c;那么HTML和CSS可…...

编程日记 2023/6/4 8:19:13

深入理解与实践Seata：分布式事务解决方案

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;微服务 &#x1f96d;本文内容&…...

编程日记 2023/6/4 8:14:12

Python学习笔记 - 探索元组Tuple的使用

欢迎各位&#xff0c;我是Mr数据杨&#xff0c;你们的Python导游。今天&#xff0c;我要为大家讲解一段特殊的旅程&#xff0c;它与《三国演义》有关&#xff0c;而我们的主角是元组&#xff08;tuple&#xff09;。 让我们想象这样一个场景&#xff0c;三国演义中的诸葛亮&am…...

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

JAVA网络编程（一）

一、什么是网络编程 定义&#xff1a;在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;进行的数据传输。 应用场景&#xff1a;即时通信&#xff0c;网游&#xff0c;邮件等 不管什么场景&#xff0c;都是计算机与计算机之间通过网络在进行数据传输 java提供一…...

编程日记 2023/6/4 8:04:09