input内容改变的触发事件

jQuery中的input事件:监听输入框内容变化的事件。 jQuery是一个流行的JavaScript库,它简化了在网页开发中处理HTML文档、处理事件、执行动画和处理AJAX等任务的操作。对于输入框内容变化的事件,可以使用input事件来实现。input事件在输入框的内容发生变化时触发,无论是用户通过键盘输入还是通过其他方式改变输入框的内容。通过这样的代码,当用户在输入框中输入或删除内容时,就会触发input事件,并且显示一个带有输入框值的消息。当输入框的内容发生变化时,绑定的处理程序将被触发。方法来设置其文本内容为"输入框的内容变化了: "加上输入框的值。 阅读详情
AI摘要

本文深入解析了前端开发中常用的事件,包括onchange、onpropertychange、oninput及addEventListener的定义、用法、语法与浏览器支持情况。同时,文章还对比了这些事件之间的区别,如触发时机与适用场景,为开发者提供了全面的前端事件处理指南。

1. onchange

  • 定义和用法
    onchange 事件会在域的内容改变时发生。
    onchange 事件也可用于单选框与复选框改变后触发的事件。
  • 语法

HTML 中:

<input onchange="SomeJavaScriptCode">

JavaScript 中:

object.onchange=function(){SomeJavaScriptCode};
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。
  • 浏览器支持
    Internet Explorer、Firefox、Opera、Google Chrome、Safari
  • 支持 onchange 事件的 HTML 标签
    onchange 属性可以使用于:<input>、<select>、<textarea> 。
  • 注意
    1. 在元素的值改变了且失去焦点时触发(两次的值一样不会触发)。
    2. 通过js代码改变DOM的值不会触发,解决在js代码里改值了调用其change 的function() 或者调.change()方法。

2. onpropertychange

  • 定义和用法
    onpropertychange会实时触发,会在元素的属性改变时就触发事件。
  • 语法
<input type="text" onpropertychange="functionName()">
  • 浏览器支持
    Internet Explorer
  • 注意
    当元素disable=true时不会触发。

3. output

  • 定义和用法
    1. oninput 事件在用户输入时触发。
    2. 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
    3. 提示: 该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发,
      onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
  • 语法

HTML:

<input oninput="myScript">

JavaScript:

object.oninput=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("input", myScript);
  • 浏览器支持
事件Internet ExplorerFirefoxOperaGoogle ChromeSafari
output9.04.0yesyes5.0
  • 注意
是否支持冒泡:Yes
是否可以取消:NO
事件类型:Event
支持的 HTML 标签:<input type="password">, <input type="search">, <input type="text"> 和 <textarea>

4. addEventListener

  • 定义和用法
    addEventListener() 方法用于向指定元素添加事件句柄。
    提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
  • 语法
element.addEventListener(event, function, useCapture)
  • 参数
参数描述
event必须。 字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。
function必须。 指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture可选。 布尔值,指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执、false- false- 默认。事件句柄在冒泡阶段执行
  • 浏览器支持
方法Internet ExplorerFirefoxOperaGoogle ChromeSafari
addEventListener()9.01.07.01.01.0
  • 注意
DOM 版本:DOM Level 2 Events
返回值:没有返回值
记录:在 Firefox 6 和 Opera 11.60 中 useCapture 参数是可选的。 (在 Chrome、IE 和 Safari 中一直都是可选的)。
js中input标签内容改变的触发事件 阅读详情

相关推荐

监听input值改变事件的jQuery方法

这是因为我们需要确保输入框元素已经存在于DOM中,以便能够正确地选择它。要在输入框的值改变时触发事件,你可以使用jQuery来监听input元素的change事件。在事件处理程序的函数中,你可以编写任何你希望在输入框值改变时执行的代码。在上面的例子中,我们简单地在控制台中输出了一条消息。你可以根据自己的HTML代码结构来修改选择器以匹配你的实际情况。你可以根据自己的需求来修改事件处理程序的代码,例如更新页面上的其他元素、发送AJAX请求或执行任何其他操作。当输入框的值发生改变时,change事件将被触发。

TechCraze的博客 1401

input 中事件 onchange onpropertychange 和oninput事件的差别

汇总onchange onpropertychange 和oninput事件的差别: 1、onchange事件与onpropertychange事件的差别: onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每添加或删除一个字符就会触发。通过js改变也会触发该事件。可是该事件IE专有。 ...

绝世唐门三哥的博客,多多关注,会不定期产出高质量文章和大家共享! 1096

input 内容改变的触发事件

input 内容改变的触发事件 1. onchange   onchange 事件会在域的内容改变时触发。支持的标签&lt;input type="text"&gt;, &lt;textarea&gt;, &lt;select&gt;,&lt;keygen&gt;。 注意:在元素的值改变了且失去焦点时触发(两次的值一样不会触发)。 缺陷:通过js代码改变DOM的值不会触发,解决在js代码...

易天海 2万+

input的onchange事件实际触发条件与解决方法

  input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征。 触发onchange 首先页面有一个input标签,并且已绑定onchange事件,如: 1&lt;input type="text" onchange="console.log(this.val...

weixin_34014277的博客 1万+

保姆级教学:从0搭建微信小程序SpringBoot+Vue(一)

目标:实现一个微信小程序从后端数据库MySQL获取的商品展示页。 框架:后端采用SpringBoot,前端采用Vue,数据库MySQL。 部署工具:IntelliJ IDEA 2024.2专业版+HbuilderX+Node+微信开发者工具,jdk1.8已安装

weixin_44545610的博客 4925

有关input输入框内容改变后的触发事件

有关input输入框内容改变后的触发事件,也是今天遇到的问题。我使用时间插件为输入框填充内容,想实现输入框内容改变后执行相应的方法,发现使用change方法没有反应。百度了半天,最后才发现问题所在。我这边考虑两种情况,一种是input输入框正常输入,另一种是给输入框赋值。1、input输入框正常输入所谓的正常输入,就是在input输入框当中进行手动输入,这种情况下change方法是有效的。

yyc13579的博客 3万+

MTK平台高效部署Qwen2.5大模型:从转换到推理全流程解析

本文详细解析了在MTK平台上高效部署Qwen2.5大模型的全流程,涵盖从环境准备、模型转换与量化,到编译部署与上机推理。重点介绍了如何利用MTK GAI部署工具包进行模型转换和量化,以适配MTK硬件,并最终在设备上成功运行Qwen2.5模型,为边缘侧AI应用提供实践指南。

weixin_29041195的博客 506

关于Input内容改变的触发事件

1、onchange onchange事件会在域的内容改变时触发。支持的标签<inputtype="text">, <textarea>, <select>,<keygen>。 注意:在元素的值改变了且失去焦点时触发(两次的值一样不会触发)。 缺陷:通过js代码改变DOM的值不会触发,解决在js代码里改值了调用其change 的functi...

优快云__FL的博客 1166

DESeq2差异分析结果不会看?用这个R脚本5分钟生成发表级火山图和热图

本文详细介绍了如何使用R语言快速可视化DESeq2差异分析结果,5分钟内生成可直接用于论文发表的火山图和热图。通过解析DESeq2数据结构、展示ggplot2和EnhancedVolcano包的绘图技巧,以及pheatmap包的热图定制方法,帮助研究者高效呈现差异表达基因分析结果。

weixin_30326515的博客 340

交叉编译Qt6.5.3(RK3568开发板)

注意,如果使用其它版本的交叉编译器的话,请确保你的交叉编译器能够支持 C++17标准。为确保后续交叉编译没问题,需要确保开发板使用的GLIBC版本不小于2.34版本。到 linaro 网站上下载交叉编译工具,我下载的是 gcc-linaro-11.3.1-2022.06-x86_64_aarch64-linux-gnu.tar.xz。安装 CMake ,最低要求3.16版本,如果要静态编译,需要3.21及以上版本。我使用的3.27版本。:指定为最后交叉编译后的Qt6.5.3库的安装目录。

m0_46309425的博客 5104

input文本框没有onchange事件,可以通过下面两种方法实现当input内容改变时触发事件

文本框内容改变是触发事件 jsp: input文本框没有onchange事件,可以通过下面两种方法实现当input内容改变时触发事件 方法一: $(".currentPage").on('input',function(e){      alert("TextChanged!") ;  });  方法二: $(".currentPage"

六月心悸 2万+

一个基于fluent超声振动仿真算例分析(含有UDF的编写设定)

一个基于Fluent的超声防堵算例

Lvyou2008的博客 2511

input标签内容改变触发的事件

原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data){ console.log...

setsunadoudou的博客 494

玩转大语言模型——使用华为官方MindIE-Server镜像方式部署DeepSeek模型

本文将详细介绍在国产Linux系统欧拉中使用华为官方MindIE-Server镜像方式部署DeepSeek模型。一般情况下华为昇腾800I服务器可以推理DeepSeek-R1-70B,4张300I-Duo服务器可以推理DeepSeek-R1-32B。在配置中尽量贴合官方文档,包含用到的一些其他的技术细节,便于零基础入门使用。

艾醒的博客 1289

SRS流媒体服务器在Windows下的安装

在之前的流媒体开发中(视频会议),我基本上使用nginx加模块的方式进行学习、测试,正式开发的时候改为服务器端用EasyDarwin,客户端用rtsp-simple-server(这些流媒体服务器的用法见我以前的博文),这样可以充分利用客户端的资源,降低服务器端的压力。在流媒体协议方案,我选择相对较快的rtsp。这个协议优点是支持UDP协议,优化好的环境下可以实现3秒以下的延迟,基本满足甲方要求,缺点就是不支持网页播放。

dgnankai的专栏 2023

html中input标签内容改变触发事件

在我的页面上,input标签使用的是弱选择类型,可以选择,也可以输入。然后 ,触发事件的话,用onblur的话,选择时触发的事件会有问题,用onchange的话,输入时触发事件会有问题。然后在实现的时候,可以在事件中加一个定时器,让事件在一定时间之后执行,这样就避免了上述的问题。代码如下: function check(){     setTimeout(function () {     

9058

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

layedit 内容变化事件_input标签内容改变的触发事件

1. onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有。2. oninput事件与onpropertychange事件的区别:oninput事件是IE之外的大多数浏览器支持的事件,在va...

weixin_39571749的博客 440

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

input标签内容改变的触发事件

1. onchange事件与onpropertychange事件的区别:   onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有。 2. oninput事件与onpropertychange事件的区别:   oninput事件是IE之外的...

1416

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

JSP中input内容改变触发onchange事件使用

最近做的一个成绩的比例添加的功能,需求是平时比例和期末比例为100%,而为了减少让用户的思考,让界面更人性化,其实我们可以在输入平时比例时,期末比例自动加载,这时就要使用jsp中input的内容改变需要触发的一个事件:onchange()。 效果图: JSP中input定义: closed="true">//否则表单一上来就加载 学年:

做一个会编程的人 2万+

input标签内容改变或失去焦点的触发事件

input标签内容改变或失去焦点的触发事件

qq_43746757的博客 8574
上一篇: 清除谷歌浏览器记住的密码
下一篇: Win10 安装 JDK1.8 及配置环境变量
dadeity
博客等级 码龄10年 1172粉丝 225原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dadeity

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值