oninput和onchange事件的区别是什么

`oninput` 和 `onchange` 是两种不同的事件,它们在处理用户输入时具有一些区别。

1. `oninput` 事件:
   - 触发时机:当用户输入框的值发生改变时立即触发,即时反馈用户的输入。
   - 适用元素:主要用于 `<input>`、`<textarea>` 和 `<select>` 等可输入内容的元素。
   - 触发条件:只要用户输入框的值发生改变,无论是键盘输入、粘贴、剪切、拖拽等方式,都会触发该事件。
   - 实时性:可以实时获取用户的输入,并对输入进行实时处理。

例如:使用 oninput 事件实时计算输入框的字符数:
 

<input type="text" oninput="countChars(this)">
<script>function countChars(input) {var count = input.value.length;console.log('已输入字符数:' + count);}
</script>

 当用户在输入框中输入字符时,会实时计算输入框中已输入的字符数,并在控制台中输出。

2. `onchange` 事件:
   - 触发时机:当用户输入框的值发生改变并且失去焦点时触发。
   - 适用元素:同样适用于 `<input>`、`<textarea>` 和 `<select>` 等可输入内容的元素。
   - 触发条件:只有在输入框失去焦点时,且值发生改变时才会触发该事件。
   - 延迟性:需要等待用户输入完成并且离开输入框后,才能触发事件。

例如:使用 onchange 事件在提交表单前验证输入框的值:
 

<form onsubmit="return validateForm()"><input type="text" id="username"><button type="submit">提交</button>
</form>
<script>function validateForm() {var username = document.getElementById('username').value;if (username === '') {alert('用户名不能为空!');return false;}return true;}
</script>

当用户点击提交按钮时,会触发 onchange 事件,验证输入框中的值是否为空。如果为空,则弹出提示框并阻止表单提交;否则允许表单提交。 

因此,主要区别在于触发时机和实时性。如果你需要实时获取用户的输入并及时做出反应,可以使用 `oninput` 事件。而如果你只关心用户最终的输入结果,可以使用 `onchange` 事件。在实际应用中,根据具体的需求选择适合的事件来处理用户输入是很重要的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/603420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GNSS观测值线性组合

1 在几何距离线性化中&#xff0c;不论变量x的估计值是多少&#xff0c;估值改正数的系数是不变的。 2.宽、窄巷组合&#xff08;噪声放大倍数&#xff09; 由于几何距离与频率无关&#xff0c;在宽巷组合中&#xff0c;可直接依据几何距离&#xff0c;四舍五入确定宽巷模糊度 …

Android 车联网——CarService介绍(二)

上一篇文章我们介绍了 Android Automotive OS 车载操作系统,其实就是传统的手机系统加上相关的汽车服务,构成了现在的车载操作系统,而其中 CarService 就是提供汽车相关功能的最主要的模块。 本文重点来介绍一下 CarService,也就是 Android 汽车服务。 一、CarService组成…

机器学习周刊第二期:300个机器学习应用案例集

大家好 前文&#xff1a;机器学习项目精选 第一期 继续分享我最近看过并觉得非常硬核的资源&#xff0c;包括Python、机器学习、深度学习、大模型等等。 1、Python编程挑战 地址&#xff1a;https://github.com/Asabeneh/30-Days-Of-Python 30天Python编程挑战是一个逐步学…

解锁Python装饰器的魔力:提升代码魅力的秘密武器

解锁Python装饰器的魔力&#xff1a;提升代码魅力的秘密武器 Python的装饰器&#xff08;Decorators&#xff09;是一种特殊的语法构造&#xff0c;它允许我们在不修改被装饰函数源代码的情况下&#xff0c;通过在其周围添加额外功能或行为。 装饰器本质上是一个函数&#xf…

基于SSM的网上购物平台设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

【fly-iot飞凡物联】(15):IOT项目使用TDengine数据库,进行技术调研,本地使用docker启动成功,可以使用python进行连接数据插入。

目录 前言1&#xff0c;视频演示地址2&#xff0c;关于TDengine2&#xff0c;启动数据库tdengine 服务3&#xff0c;Docker Compose搭建TDengine集群 前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/108971807 fly-iot飞凡物联专栏&#xff1a; htt…

单文件上传

随着Web应用的普及&#xff0c;文件上传功能成为许多网站和应用不可或缺的一部分。本文整理了个人学习过程中的笔记&#xff0c;为开发者提供全面的了解和实践经验。 单文件上传 在早期的html应用中&#xff0c;都是使用form标签中嵌套来实现文件上传的&#xff0c;具体代码如…

YTM32的低功耗PowerDown模式及唤醒管理器WKU模块

文章目录 Introduction专门的唤醒源管理器WKU外部的唤醒引脚内部的触发信号 进入PowerDown模式的操作流进入低功耗模式配合使用的其他模块 性能指标低功耗电流唤醒时间 Conclusion Introduction YTM32的低功耗系统中有设计了多种工作模式&#xff0c;功耗从高到低&#xff0c;…

Android AIDL 创建的DEMO

使用AIDL创建一个demo 主要参考文件&#xff0c; 以及其他地址 Android 接口定义语言 (AIDL) | Android 开发者 | Android Developers 绑定服务概览 | Android 开发者 | Android Developers Android 接口定义语言 (AIDL) Android 接口定义语言 (AIDL) 与您可能使用…

史诗级长文--决策树

决策树 决策树(decision tree)是一种基本的分类与回归方法。 举个通俗易懂的例子&#xff0c;如下图所示的流程图就是一个决策树&#xff0c;长方形代表判断模块(decision block)&#xff0c;椭圆形成代表终止模块(terminating block)&#xff0c;表示已经得出结论&#xff0c;…

C练习——肇事卡车车牌号

题目&#xff1a; 一辆卡车违反交通规则&#xff0c;撞人后逃跑。现场有3人目击事件&#xff0c;但没有记住车牌号&#xff0c;只记住了车号的一些特征。 甲说&#xff1a;“牌照前两位数字是相同的”&#xff0c;乙说&#xff1a;“牌照的后两位数字是相同的&#xff0c;但与…

pinia的独立维护,统一导出及持久化

目录 1.说明及示例 2.注意 1.说明及示例 在src下创建store文件夹&#xff0c;在store文件夹下创建index.js文件&#xff0c;内容如下&#xff1a; import { createPinia } from "pinia"; // pinia的持久化 import piniaPluginPersistedstate from "pinia-pl…

odoo17 | 视图字段验证约束

前言 前一章介绍了向模型添加一些业务逻辑的能力。现在我们可以将按钮链接到业务代码&#xff0c;但是我们如何防止用户输入错误的数据呢?例如&#xff0c;在我们的房地产模块中&#xff0c;没有什么可以阻止用户设置负预期价格。 Odoo提供了两种方法来设置自动验证的不变量…

【gRPC学习】使用go学习gRPC

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 RPC是远程调用,而google实现了grpc比较方便地实现了远程调用,gRPC是一个现代的开源远程过程调用(RPC)框架 概念介绍 在gRPC中&#xff0c;客户端应用程序可以直接调用另一台计算机上的服务器应用程序上的方法&#…

认识加密和解密

加密技术源远流长&#xff0c;自从古代有了信息的传递和存储&#xff0c;就有了加密技术的运用。此后&#xff0c;很长一段时间里&#xff0c;加密及解密技术在军事、政治、外交、金融等特殊领域里被普遍采用&#xff0c;并经过长时间的研究和发展&#xff0c;形成了比较完备的…

element plus 表格组件怎样在表格中显示图片

官方给的&#xff1a; <el-table-column label"Thumbnail" width"180"><template #default"scope"><div style"display: flex; align-items: center"><el-image :preview-src-list"srcList"/><…

一起玩儿物联网人工智能小车(ESP32)——24. 变量与函数(二)

摘要&#xff1a;本文介绍变量和函数的基本知识 在前面一篇中了解了变量&#xff0c;接着就来了解一下函数。函数是程序中的一个关键概念&#xff0c;它可以简化程序的编写&#xff0c;使代码更加模块化、可复用&#xff0c;提高程序的可读性。其实在之前已经多次遇到函数了&am…

Arduion Modbus通讯示例

实现了Arduion和Qt上位机利用Modbus协议采集DHT11数据&#xff0c;以及开关LED灯 软件界面&#xff1a; 实物界面&#xff1a; arduion下位机代码&#xff1a; #include <ModbusRtu.h> #include <DHT.h>#define DHTPIN 2 // DHT11连接到Arduino的数字引…

使用C#发送邮箱验证码

使用C#发送邮箱验证码 在很多应用程序中&#xff0c;我们需要使用邮箱来进行用户身份验证。其中一种常见的方式是通过发送验证码到用户的邮箱&#xff0c;然后要求用户输入该验证码进行验证。本文将介绍如何使用 C# 发送邮箱验证码。 声明 验证码登录没有用任何的工具&#…

学习尚硅谷Vue的TodoList案例下半部分总结

今天学习尚硅谷Vue的TodoList案例四到八节的内容&#xff0c;主要实现的功能有勾选、删除、底部统计、底部交互这几部分。先说勾选&#xff0c;想要获取到用户是否勾选&#xff0c;就要给checkbox多选框注册鼠标点击事件&#xff0c;这里的思路是用户虽然是获取到了是否勾选但还…