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

JavaScript表单事件(上篇)

news 2025/11/1 1:48:02

目录

一、input: 当表单元素的值发生改变时触发，适用于大多数表单元素。

二、change: 当表单元素的值发生改变且失去焦点时触发，适用于输入框、下拉列表等。

三、submit: 当表单提交时触发，适用于 form 元素。

四、reset: 当表单重置时触发，适用于 form 元素。

五、focus: 当表单元素获得焦点时触发。

六、blur: 当表单元素失去焦点时触发。

七、select: 当文本框或文本区域中的文本被选中时触发。

一、input: 当表单元素的值发生改变时触发，适用于大多数表单元素。

表单事件input常用于实时监听输入框的变化，并进行相应的处理。它适用于需要在用户输入内容时立即响应的场景，例如实时搜索、输入框字符限制、动态更新计算结果等。

以下是一个简单的例子，当用户在输入框中输入文字时，实时统计输入的字符数并显示在页面上：

<!DOCTYPE html>
<html>
<head><title>实时字符统计</title>
</head>
<body><label for="input-text">输入文本：</label><input type="text" id="input-text"><p id="char-count">字符数：0</p><script>// 获取输入框和字符统计区域元素var inputText = document.getElementById('input-text');var charCount = document.getElementById('char-count');// 监听input事件inputText.addEventListener('input', function() {// 获取输入框的值var value = inputText.value;// 统计字符数var count = value.length;// 更新字符统计区域的内容charCount.textContent = '字符数：' + count;});</script>
</body>
</html>

二、change: 当表单元素的值发生改变且失去焦点时触发，适用于输入框、下拉列表等。

表单事件change适用于需要监听表单元素值的变化，并在值发生变化后进行相应处理的场景。它与input事件不同之处在于，change事件在用户提交表单或离开表单元素时才会触发，而input事件在用户每次输入时都会触发。

以下是一个简单的例子，当用户选择不同的选项时，根据选择的选项显示不同的提示信息：

<!DOCTYPE html>
<html>
<head><title>选择提示信息</title>
</head>
<body><label for="select-option">选择选项：</label><select id="select-option"><option value="option1">选项1</option><option value="option2">选项2</option><option value="option3">选项3</option></select><p id="message">请选择一个选项</p><script>// 获取选择框和提示信息元素var selectOption = document.getElementById('select-option');var message = document.getElementById('message');// 监听change事件selectOption.addEventListener('change', function() {// 获取选择的值var selectedValue = selectOption.value;// 根据选择的值显示相应的提示信息if (selectedValue === 'option1') {message.textContent = '您选择了选项1';} else if (selectedValue === 'option2') {message.textContent = '您选择了选项2';} else if (selectedValue === 'option3') {message.textContent = '您选择了选项3';}});</script>
</body>
</html>

三、submit: 当表单提交时触发，适用于 form 元素。

表单事件submit适用于需要在用户提交表单时执行一些操作的场景。通过监听submit事件，可以在用户点击提交按钮或按下回车键提交表单时触发相应的处理函数，例如数据验证、表单提交等操作。

以下是一个简单的例子，当用户提交表单时，通过JavaScript的submit事件在控制台输出表单数据：

<!DOCTYPE html>
<html>
<head><title>表单提交</title>
</head>
<body><form id="my-form"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><button type="submit">提交</button></form><script>var form = document.getElementById('my-form');form.addEventListener('submit', function(event) {event.preventDefault();// 获取表单数据var name = document.getElementById('name').value;var email = document.getElementById('email').value;// 输出表单数据到控制台console.log('姓名:', name);console.log('邮箱:', email);});</script>
</body>
</html>

四、reset: 当表单重置时触发，适用于 form 元素。

reset事件在表单重置时触发，可以用于执行一些重置操作或者在重置表单时进行一些特定的处理。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>表单重置</title>
</head>
<body><form id="my-form"><label for="name">姓名：</label><input type="text" id="name" name="name" value="John Doe"><label for="email">邮箱：</label><input type="email" id="email" name="email" value="johndoe@example.com"><button type="reset">重置</button></form><script>var form = document.getElementById('my-form');form.addEventListener('reset', function(event) {// 在重置表单时执行特定的操作console.log('表单已重置');// 可以在这里进行一些其他的处理，例如清空输入框内容、恢复默认选项等});</script>
</body>
</html>

五、focus: 当表单元素获得焦点时触发。

focus事件在表单元素获取焦点时触发，可以用于在用户焦点进入表单元素时执行一些特定的操作。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>表单焦点</title>
</head>
<body><form><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="email">邮箱：</label><input type="email" id="email" name="email"><button type="submit">提交</button></form><script>var nameInput = document.getElementById('name');var emailInput = document.getElementById('email');nameInput.addEventListener('focus', function(event) {// 在姓名输入框获取焦点时执行特定的操作console.log('姓名输入框获取焦点');});emailInput.addEventListener('focus', function(event) {// 在邮箱输入框获取焦点时执行特定的操作console.log('邮箱输入框获取焦点');});</script>
</body>
</html>

在上述例子中，我们分别监听了姓名输入框和邮箱输入框的focus事件，并在事件处理函数中执行一些特定的操作。在这个例子中，我们简单地在控制台输出了一条消息来表示哪个输入框获取了焦点。你可以根据具体需求在focus事件中添加自定义的操作，例如显示辅助提示、改变样式等。

六、blur: 当表单元素失去焦点时触发。

blur事件在表单元素失去焦点时触发，可以用于在用户焦点离开表单元素时执行一些特定的操作。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>表单失去焦点</title>
</head>
<body><form><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="email">邮箱：</label><input type="email" id="email" name="email"><button type="submit">提交</button></form><script>var nameInput = document.getElementById('name');var emailInput = document.getElementById('email');nameInput.addEventListener('blur', function(event) {// 在姓名输入框失去焦点时执行特定的操作console.log('姓名输入框失去焦点');});emailInput.addEventListener('blur', function(event) {// 在邮箱输入框失去焦点时执行特定的操作console.log('邮箱输入框失去焦点');});</script>
</body>
</html>

在上述例子中，我们分别监听了姓名输入框和邮箱输入框的blur事件，并在事件处理函数中执行一些特定的操作。在这个例子中，我们简单地在控制台输出了一条消息来表示哪个输入框失去了焦点。你可以根据具体需求在blur事件中添加自定义的操作，例如校验输入内容、保存数据等。

七、select: 当文本框或文本区域中的文本被选中时触发。

select事件在用户选择文本时触发，它适用于需要对选定文本进行操作或响应的场景。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>文本选择</title>
</head>
<body><p>请在下方文本框内选择一段文本：</p><textarea id="myTextarea" rows="4" cols="50"></textarea><script>var textarea = document.getElementById('myTextarea');textarea.addEventListener('select', function(event) {// 在文本选择发生时执行特定的操作var selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);console.log('选中的文本：', selectedText);});</script>
</body>
</html>

在上述例子中，我们监听了文本框的select事件，并在事件处理函数中获取了选中的文本。通过使用textarea.selectionStart和textarea.selectionEnd属性，我们可以获取到选中文本的起始位置和结束位置，然后使用substring方法提取出选中的文本。在这个例子中，我们简单地在控制台输出了选中的文本内容。你可以根据具体需求，在select事件中添加自定义的操作，例如执行剪切、复制、格式化等操作。

相关文章：

JavaScript表单事件(上篇)

目录 一、input: 当表单元素的值发生改变时触发&#xff0c;适用于大多数表单元素。 二、change: 当表单元素的值发生改变且失去焦点时触发&#xff0c;适用于输入框、下拉列表等。 三、submit: 当表单提交时触发&#xff0c;适用于 form 元素。 四、reset: 当表单重置时触…...

编程日记 2023/6/4 13:45:28

vb6 Webview2微软Edge Chromium内核执行JS取网页数据测速

微软Edge Chromium内核执行JS获取网页数据测试 ExcuteScript eval(document.body.innerHTML) from : https://www.163.com 采集的网页HTM字符串占用字节空间1.2MB ExcuteScript回调事件中取得JS执行结果&#xff0c;用时 54 毫秒 其中JSON转字符13.5209毫秒 jSON数据长度: 增…...

编程日记 2023/6/4 13:40:27

编码，Part 1：ASCII、汉字及 Unicode 标准

个人博客 编码的历史由来就懒得介绍了&#xff0c;只需要知道人类处理文本信息是以字符为基本单位&#xff0c;而计算机在最底层只认识 0/1&#xff0c;所以当计算机要为人类存储/呈现字符时&#xff0c;就需要有一个规则&#xff0c;在字符和 0/1 序列之间建立映射关系&#…...

编程日记 2023/6/4 13:35:26

C++ Eigen库矩阵操作

C Eigen库 序号功能例子1赋值Eigen::MatrixXf mat (12,1); \\% mat << 1, 2, 3, 4,5,6,7,8,9,10,11,12;2Inplace操作 \\% resizemat.resize(4, 3); \\% 1 5 9 \\% 2 6 10 \\% 3 7 11 \\% 4 8 123转置 \\% transposeInPlacemat.transposeInPlace(); \\% 1 2 3 4 \\% 5…...

编程日记 2023/6/4 13:30:25

Linux-0.11 boot目录bootsect.s详解

Linux-0.11 boot目录bootsect.s详解 模块简介 bootsect.s是磁盘启动的引导程序&#xff0c;其概括起来就是代码的搬运工&#xff0c;将代码搬到合适的位置。下图是对搬运过程的概括&#xff0c;可以有个印象&#xff0c;后面将详细讲解。 bootsect.s主要做了如下的三件事: 搬…...

编程日记 2023/6/4 13:25:24

django组件552

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…...

编程日记 2023/6/4 13:20:23

【枚举算法的Java实现及其应用】

文章目录 枚举算法概述枚举算法的实现步骤Java实现枚举算法枚举算法的底层工作原理枚举算法的底层代码讲解枚举算法的实际应用场景枚举算法在场景中解决的问题总结 枚举算法概述 枚举算法是一种通过列举所有可能情况来解决问题的方法。这种算法在解决一些特定类型的问题时非常…...

编程日记 2023/6/4 13:15:22

linux led 驱动

前言 今天是儿童节&#xff0c;挣个奖牌给小孩玩玩。 在 linux 驱动大家庭中&#xff0c;LED 驱动算是个儿童&#xff0c;今天就写写他吧。正好之前写过他的婴儿时期《i.MX6ULL 裸机点亮 LED》&#xff0c;记得那时候他还穿着开裆裤呢&#xff0c;裸鸡嘛。 ioremap() 裸机程…...

编程日记 2023/6/4 13:10:21

平面最近点对（分治算法）

文章目录 平面最近点对&#xff08;分治算法&#xff09;Solution流程完整模板代码 平面最近点对&#xff08;分治算法&#xff09; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 平面最近点对&#xff08;加强版&#xff09; - 洛谷 给你一些点&#xff0c;求两点之…...

编程日记 2023/6/4 13:05:20

【基于前后端分离的博客系统】Servlet版本

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一. 项目简介 1. 项目背景 2. 项目用到的技…...

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

在线Excel绝配：SpreadJS 16.1.1+GcExcel 6.1.1 Crack

前端&#xff1a;SpreadJS 16.1.1 后端&#xff1a; GcExcel 6.1.1 全能 SpreadJS 16.1.1此版本的产品中包含以下功能和增强功能。 添加了各种输入掩码样式选项。 添加了在保护工作表时设置密码以及在取消保护时验证密码的支持。 增强了组合图以将其显示为仪表图。 添加了…...

编程日记 2023/6/4 12:55:18

一个轻量的登录鉴权工具Sa-Token 集成SpringBoot简要步骤

Sa-Token 集成SpringBoot简要步骤 1.1 简单介绍 Sa-Token是一个轻量级Java权限认证框架。 主要解决的问题如下&#xff1a; 登录认证 权限认证 单点登录 OAuth2.0 分布式Session会话 微服务网关鉴权等一系列权限相关问题。 1.2 登录认证 设计思路 对于一些登录之后…...

编程日记 2023/6/4 12:50:15

day 44 完全背包:518. 零钱兑换 II；377. 组合总和 Ⅳ

完全背包&#xff1a;物品可以使用多次 完全背包1. 与01背包区别 518. 零钱兑换 II1. dp数组以及下标名义2. 递归公式3. dp数组如何初始化4. 遍历顺序:不能颠倒两个for循环顺序5. 代码 377. 组合总和 Ⅳ:与零钱兑换类似&#xff0c;但是是求组合数1. dp数组以及下标名义2. 递归…...

编程日记 2023/6/4 12:45:15

K8s in Action 阅读笔记——【5】Services: enabling clients to discover and talk to pods

K8s in Action 阅读笔记——【5】Services: enabling clients to discover and talk to pods 你已了解Pod以及如何通过ReplicaSets等资源部署它们以确保持续运行。虽然某些Pod可以独立完成工作&#xff0c;但现今许多应用程序需要响应外部请求。例如&#xff0c;在微服务的情况…...

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

牛客网DAY2(编程题)

圣诞节来啦&#xff01;请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的&#xff1a; 1. "topbranch"是圣诞树的上枝叶&#xff0c;该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是&#xff1a;宽度为100px、是直线、颜色为gr…...

编程日记 2023/6/4 12:35:12

Java经典笔试题—day14

Java经典笔试题—day14 &#x1f50e;选择题&#x1f50e;编程题&#x1f36d;计算日期到天数转换&#x1f36d;幸运的袋子 &#x1f50e;结尾 &#x1f50e;选择题 (1)定义学生、教师和课程的关系模式 S (S#,Sn,Sd,Dc,SA &#xff09;&#xff08;其属性分别为学号、姓名、所…...

编程日记 2023/6/4 12:30:11

一个帮助写autoprefixer配置的网站

前端需要用到postcss的工具&#xff0c;用到一个插件叫autoprefixer&#xff0c;这个插件能够给css属性加上前缀&#xff0c;进行一些兼容的工作。 如何安装之类的问题在csdn上搜一下都能找到&#xff08;注意&#xff0c;vite是包含postcss的&#xff0c;不用在项目中安装pos…...

编程日记 2023/6/4 12:25:10

C语言中的类型转换

C语言中的类型转换 隐式类型转换 整型提升 概念&#xff1a; C语言的整型算术运算总是至少以缺省&#xff08;默认&#xff09;整型类型的精度来进行的为了获得这个精度&#xff0c;表达式中字符和短整型操作数在使用之前被转换为普通整型&#xff0c;这种转换成为整型提升 如…...

编程日记 2023/6/4 12:20:09

String底层详解（包括字符串常量池）

String a “abc”; &#xff0c;说一下这个过程会创建什么&#xff0c;放在哪里&#xff1f; JVM会使用常量池来管理字符串直接量。在执行这句话时&#xff0c;JVM会先检查常量池中是否已经存有"abc"&#xff0c;若没有则将"abc"存入常量池&#xff0c;否…...

编程日记 2023/6/4 12:15:08

C++ 里面lambda和函数指针的转换

问题说明 原始问题&#xff0c;代码如下会编译报错&#xff1a; using DecisionFn bool(*)();class Decide { public:Decide(DecisionFn dec) : _dec{dec} {} private:DecisionFn _dec; };int main() {int x 5;Decide greaterThanThree{ [x](){ return x > 3; } };retur…...

编程日记 2023/6/4 12:10:07

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/9/28 21:29:01

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/10/23 21:52:47

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/10/27 18:38:36

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/10/21 3:16:48

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

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

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

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

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

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

编程新知 2025/10/18 20:50:06

【技巧】dify前端源代码修改第一弹-增加tab页

回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码&#xff0c;在知识库增加一个tab页"HELLO WORLD"&#xff0c;完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...

编程新知 2025/10/28 0:35:36