oninput onpropertychange

转载 2015年11月20日 17:41:07


oninput 是 HTML5的标准事件,对于检测 textarea, input:text, input:password 和 input:search    oninput 事件在 IE9 以下版本不支持,是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

oninput要通过addEventListener()来注册,onpropertychange注册方法与一般事件相同。

onchange触发事件必须满足两个条件:
 a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
 b)当前对象失去焦点(onblur);
       也就是说并不是我们在打字的时候就会触发,而是在打完这后,焦点移出去之后,才触发;只有人工触发才有效,如果利用 JavaScript 程序改变是没有效果的

 onpropertychange    只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;


 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 

onpropertychange的bug     
在代码实现时,发现在响应用户onclick了textarea时,如果使用obj.className="XX";来改变textarea输入框中字体的样式,会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug,因此需要这样设置:obj.style.color="#000";

 oninput与onpropertychange失效的情况:

oninput事件:

(1)当脚本中改变value时,不会触发;

(2)从浏览器的自动下拉提示中选取时,不会触发;

onpropertychange事件:

当input设置为disable=true后,不会触发。


onpropertychange 这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
  • 修改了 select 元素的选中项,selectedIndex 属性发生变化。

  在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。


oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search    oninput 事件在 IE9 以下版本不支持,是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

oninput要通过addEventListener()来注册,onpropertychange注册方法与一般事件相同。

onchange触发事件必须满足两个条件:
 a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
 b)当前对象失去焦点(onblur);
       也就是说并不是我们在打字的时候就会触发,而是在打完这后,焦点移出去之后,才触发;只有人工触发才有效,如果利用 JavaScript 程序改变是没有效果的

 onpropertychange    只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;


 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 



onpropertychange的bug     
在代码实现时,发现在响应用户onclick了textarea时,如果使用obj.className="XX";来改变textarea输入框中字体的样式,会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug,因此需要这样设置:obj.style.color="#000";

 oninput与onpropertychange失效的情况:

oninput事件:

(1)当脚本中改变value时,不会触发;

(2)从浏览器的自动下拉提示中选取时,不会触发;

onpropertychange事件:

当input设置为disable=true后,不会触发。




onpropertychange 这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
  • 修改了 select 元素的选中项,selectedIndex 属性发生变化。

  在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

js学习小结(十四)2014.5.23(onpropertychange、oninput、onchange的区别与联系以及正则表达式的应用)

顶顶顶顶顶顶顶顶

js监听输入框值的即时变化onpropertychange、oninput

http://www.jb51.net/article/27684.htm 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。 要...
  • wjy397
  • wjy397
  • 2016年07月02日 10:30
  • 2100

仿百度搜索实时监听输入框值的oninput与onpropertychange方法

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实...

js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

(1)先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').b...

实时监听input中值变化oninput & onpropertychange

在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理...

oninput,onpropertychange,onchange的用法和区别

1、前言    由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示:因此,稍微研究了一下oninput,onpropertychang...

onchange、onpropertychange、oninput和onblur

一、onchange发生有两个条件: 1、元素的属性(value)改变了; 2、元素失去焦点。 注:通过js修改元素的value不能触发onchange,只能通过键盘和鼠标修改的才有效。 二、...

总结oninput、onchange与onpropertychange事件的用法和区别

注意本文转自:http://blog.csdn.net/freshlover/article/details/39050609 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写...

实时监听输入框值变化的完美方案:oninput & onpropertychange

在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,...

实时监听输入框值变化的完美方案:oninput & onpropertychange

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:oninput onpropertychange
举报原因:
原因补充:

(最多只允许输入30个字)