文本框onchange、oninput、onpropertychange事件简介

发布时间:2020-11-21编辑:脚本学堂
本文介绍下,应用于文本框的三个事件onchange、oninput、onpropertychange事件,分享下三个事件的用法,供大家做个参考。

注意,onchange事件必须满足下面两个条件才会触发:
1、通过键盘输入修改了文本框里的内容;
2、文本框失去焦点。

大部分浏览器应该都支持,在firefox和ie下测过,可用。
 必须是通过键盘输入才有可能触发onchange事件,通过js修改文本框里的内容是不会触发的。如果js里修改文本框内容也需要触发该事件,可用js程序触发这个对象的onchange事件(例如:object.fireEvent("onchage");)。

 文本框失去焦点之后才会触发onchange事件。
 失去焦点有两种情况:
 一种是用户点击文本框之外的元素,该元素上没有绑定事件;
 另一种是用户点击了文本框之外的绑定了事件的元素,例如用户在输入完成后,直接点了其他按钮,这会触发两个事件:先触发文本框的onchange事件,然后触发按钮的onclick事件。
 
 某些情况下,需要在用户输入内容之后,进行下一步操作之前就能立即判断文本框里的内容是否合法,这时就该oninput和onpropertychange事件出场啦。

oninput 是HTML5新增的标准事件,对于检测textarea, input:text, input:password和input:search这几个元素通过键盘输入引起的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。

 oninput事件可以直接在html的标签中使用,也可以在js中添加事件,但是只能用object.addEventListener('input', function() {...}, false)来添加,不能用其他事件绑定方式。

 现在大部分浏览器都支持oninput事件,但是低版本的IE(IE6、IE7、IE8)不支持!文本框onchange、oninput、onpropertychange事件 - asakakage - 浅香 影 不过,还好有onpropertychange事件。

 onpropertychange事件当元素属性变化时触发。当它作用于文本框时,不仅仅是文本框内容变化时触发,其它的属性变化时也会触发该事件。
 如果只需要当某个特定属性改变时进行操作,可以获取触发onpropertychange事件的属性名,并进行判断,过滤掉其他属性。

 只有IE支持 onpropertychange事件,是的,没错,IE only!
 键盘输入引起的属性改变、js里修改元素属性都会触发onpropertychange事件。