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

JavaScript表单事件(上篇)

news 文章来源：https://blog.csdn.net/zhangawei123/article/details/130910291 2025/5/11 6:12:57

目录

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

前端Rust开发WebAssembly与Swc插件快速入门

前言 现代前端对速度的追求已经进入二进制工具时代&#xff0c;Rust 开发成为每个人的必修课。 一般我们将常见的前端 Rust 开发分为以下几类&#xff0c;难度由上至下递增&#xff1a; 开发 wasm 。 开发 swc 插件。 开发代码处理工具。 我们将默认读者具备最简单的 Rus…...

编程日记 2023/6/4 12:05:06

【C++ 学习 ⑧】- STL 简介

目录 一、什么是 STL&#xff1f; 二、STL 的版本 三、STL 的 6 大组件和 13 个头文件 四、学习 STL 的 3 个境界 五、STL 的缺陷 参考资料&#xff1a; STL教程&#xff1a;C STL快速入门&#xff08;非常详细&#xff09; (biancheng.net)。 C STL是什么&#xff0c;有…...

编程日记 2023/6/4 12:00:05

论文笔记--Deep contextualized word representations

论文笔记--Deep contextualized word representations 1. 文章简介2. 文章概括3 文章重点技术3.1 BiLM(Bidirectional Language Model)3.2 ELMo3.3 将ELMo用于NLP监督任务 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Deep contextualized word representations作者…...

编程日记 2023/6/4 11:55:04

【MySQL高级篇笔记-性能分析工具的使用 (中) 】

此笔记为尚硅谷MySQL高级篇部分内容 目录 一、数据库服务器的优化步骤 二、查看系统性能参数 三、统计SQL的查询成本&#xff1a;last_query_cost 四、定位执行慢的 SQL&#xff1a;慢查询日志 1、开启慢查询日志参数 2、查看慢查询数目 3、慢查询日志分析工具&#xf…...

编程日记 2023/6/4 11:50:02

大学生数学建模题论文

大学生数学建模题论文篇1 浅论高中数学建模与教学设想 论文关键词&#xff1a;数学建模 数学 应用意识 数学建模教学 论文摘要&#xff1a;为增强学生应用数学的意识&#xff0c;切实培养学生解决实际问题的能力&#xff0c;分析了高中数学建模的必要性&#xff0c;并通过对高中…...

编程日记 2023/6/4 11:45:01

论文阅读 —— 滤波激光SLAM

文章目录 FAST-LIO2FAST-LIOIMUR2LIVER3LIVEEKFLINS退化摘要第一句 FAST-LIO2 摘要&#xff1a; 本文介绍了FAST-LIO2&#xff1a;一种快速、稳健、通用的激光雷达惯性里程计框架。 FAST-LIO2建立在高效紧耦合迭代卡尔曼滤波器的基础上&#xff0c;有两个关键的新颖之处&#…...

编程日记 2023/6/4 11:40:00

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