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

nput中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征。

触发onchange

首先页面有一个input标签,并且已绑定onchange事件,如:

<input type="text" onchange="console.log(this.value);" />

这个事件要做的动作很简单,只是把input的值在控制台上打印出来就好。效果:

这个onchange是怎么触发的呢?经过实验,大致是以下几个步骤

一、当input捕获到焦点后,系统储存当前值

二、当input焦点离开后,判断当前值与之前存储的值是否不等,如果为true则触发onchange事件。

非IE可以回车触发

这个行为有点意思,即当input获取焦点后,不仅是焦点离开时会去校验当前的值与获取焦点临时存储值是否一致,还会在你敲回车的时候就去干这事。比如,我输入一些内容以后,我想让它触发onchange事件,但又不想使用鼠标点别处,于是敲回车它就触发一次onchange事件,当然,如果你敲回车的时候,前后两次的值不相等才会触发,为了形象的展示这个案例,我们修改页面代码的input:

<input type="text" onkeydown="console.log(‘from onkeydown : ‘ + event.keyCode);" onchange="console.log(‘from onchange : ‘ + this.value);" />

效果如下:

这个例子在FireFox,Chrome,Safari下测试通过。

通过DOM对象赋值不会触发

虽然表面上感觉是当内容发生变化时,就会触发onchange事件,但是那只能在页面上操作。而如果通过dom对象去修改它的value则什么事也不会发生。

如:

通过dom对象赋值后,虽然值发生了变化,但并没有触发onchange事件,即使你像下面这样模拟真实输入也不管用

实际案例

假如,在实际中,我们有这么一个案例

<input type="text" onchange="a(this);" />

js代码:

function a(obj){
	console.log(obj.value);
}

这个功能在正常的页面操作下都没问题,但我希望通过dom对象改变value时也触发a()函数,那有很多种做法。

第一,比较简单粗暴,只要赋值手动触发

截图中右侧两行代码,就是先给input赋值,然后再执行a()函数。

第二,直接执行onchange触发事件

当我给input赋值后,顺便触发onchange事件。

第三,写一个专有赋值方法

以上两种,都是只要赋值就触发a()函数,不太友好,因为也许值并没有改变。

比如原来input中的值是a,但我给它赋值a以后本应该是赋值前与赋值后的两个值都相等就不能触发onchange函数,为了这个需求,我们可以写一个jQuery方法来实现,简单易用。

(function($) {
	 $.fn.update = function(value){
	 	$(this).each(function(){
			if(value!=this.value){
				this.value = value;
				this.onchange();
			}
		});
	 };
})(jQuery);

执行结果:

默认,input是空的,所以执行第一个update时 cccc != "" 自然就执行onchange,执行第二个update时, cccc == cccc 于是就不走onchange事件了。

转载自:http://www.zhixing123.cn/jsp/37858.html

时间: 2024-10-12 11:48:36

input的onchange事件实际触发条件与解决方法的相关文章

(总结)Nginx 502 Bad Gateway错误触发条件与解决方法

一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.以下是从Google搜集整理的一些Nginx 502错误的排查方法,供参考: Nginx 502错误的原因比较多,是因为在代理模式下后端服务器出现问题引起的.这些错误一般都不是nginx本身的问题,一定要从后端找原因!但nginx把这些出错都揽在自己身上了,着实让nginx的推广者备受置疑,毕竟从字眼上理解,bad gateway?不就是bad nginx吗?让不了解的人看到,会直接把责任推在

XtraGrid的CustomUnboundColumnData事件的触发条件

XtraGrid的CustomUnboundColumnData是让非数据绑定的列触发事件. 以便于自行处理该列的显示数据与数据源. 一.CustomUnboundColumnData事件的触发条件,否则不触发. 1.将该列的UnboundType属性设置为bound(默认值)以外的数据类型 2.为该列设置一个窗体内全局唯一的FieldName,注意这个FieldName甚至不能出现在窗体上其它XtraGrid中. 说明:如果表格中部分Unbound列指定的FieldName不唯一,那么如果还有

React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效

最近第一次开始学习封装组件,遇到几个比较神奇的问题. 首先就是如果input外边包一个div,如果把input的onChange事件绑定到div上,也会生效 <div onChange={(e)=>{console.log(e.target.value)}}> <Input/> </div> 还有,如果封装了一个组件,那么里面的最外层元素的{...this.props}需要慎用,虽然这样子做,可以把样式传过来,并且生效,但是会报错 原文地址:https://www

Quartz.NET 前一次任务未执行完成时不触发下次的解决方法

原文:Quartz.NET 前一次任务未执行完成时不触发下次的解决方法 如图所示,在Job 上 加     [DisallowConcurrentExecution]        特性 原文地址:https://www.cnblogs.com/lonelyxmas/p/11780421.html

select onchange 事件的触发

做小组内使用的一个简单工具,其中要实现的一个小功能是当某个下拉菜单的选择值改变时触发另一表单元素的属性变化.自然的想到使用select表单元素的onchange事件. 下拉菜单部分的代码如下: <select name="type" id="type" disabled="disabled" onchange="setDelType(this)"> <option value="1">

winform DataGridView的虚模式填充,CellValueNeeded事件的触发条件

虚模式填充常用来处理大量数据,某个字段的显示问题. DataGridView是.net 2.0新增的表格数据编辑和显示控件,简单的数据显示和编辑,只需直接和数据源绑定就可以了. 对于 一些特殊情况,我们需要自己填充DataGridView,这时候只需要按照行列顺序,首先获得行,然后通过行的Cells属性,得到单元格,设置其 Value属性即可.但这种模式有个问题,即对于几十行或者几百行的数据,显示效率不是问题,当数据量逐渐增大时,效率就成了一个非常重要的问题. 那么,如何解决这样的问题呢,写过或

百度地图JS API移动端,phonegap 自定义覆盖物Click事件无法执行 的 bug 解决方法

当你为自定义覆盖物添加了click事件后,你会发现在移动端是无论如何也触发不了的,这算是一个BUG. 最近我在为我的地图APP开发第二版,在为一个覆盖物添加行为事被困扰到了,自定义覆盖物的click事件竟然无法在iPhone端触发,以及百度地图JS API里面的开源库涉及到自定义覆盖物click事件的均无效. 我为这个BUG烦恼了很久,直到今天,在QQ群里网友(在此要先感谢这位网友mooring)告诉了我解决方法:iPhone上的自定义覆盖物事件默认会触发map的click事件,如果map定义了

ios微信浏览器click事件不起作用的解决方法

$(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,html代码是动态追加进去的,click事件在苹果手机没作用,在安卓和pc端事件完全正常 经过一番搜索,解决方法也很奇葩,只需在html代码中添加onclick=""   就可以了,记录下来 ,让后面看到的人少走弯路 如:<div class="weui_cell"

js中hover事件时候的BUG以及解决方法

hover事件是我们在开发前段时候遇到的稀松平常的问题,但是有没有发现会出现有一个BUg,比如,你移动到一个元素上,让它执行一个方法,然后你快速的移入移出的时候,他会进行亮瞎你眼睛的频闪效果,而且跟得了老年痴呆一样会进行延时显示,24K钛合金也会被闪瞎的,鼠标重复在相应区域滑动的时候,动画会一直执行,直到和鼠标经过的次数相同位置.比如鼠标移进3次,移出3次,动画就会出现三次.这显然是极度影响用户体验的.然后我们公司大后端告诉我说把mouseevent和monseleave合并成一个hover事件