oninput & onchange & onpropertychange 区别

1.onchange  

  弊端:1.元素失去焦点时触发

       2.如果得用javascript改变触发对象的属性时,并不能触发onchange事件,oninput也有这个问题。

2.oninput     该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

  例:

  <input type="text" id="myInput" oninput="myFunction()">
  <p id="demo"></p>

  <script>
  function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "你输入的是: " + x;
  }
  </script>

  该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。

  IE9以下的浏览器是不支持oninput事件的。

  不但JS 改变 value 值时不能触发,有从浏览器的自动下拉提示中选值时,也不会触发。

3.onpropertychange

  property(属性)change(改变)的时候,触发事件。这是IE专有的!如果想兼容其它浏览器,有个类似的事件,oninput!

  onpropertychange会在设置disable=true的时候失效。而且,onpropertychange是在触发对象改变任何属性时都会触发。而oninput只是在改变input的value值时才触发。

时间: 2024-11-18 11:38:17

oninput & onchange & onpropertychange 区别的相关文章

js 输入变化监控onchange onpropertychange oninput

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

onchange onpropertychange 和oninput事件

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

oninput和onpropertychange事件简单介绍

oninput和onpropertychange事件简单介绍:这两个事件可能稍感陌生,但是在处理某些事件的时候却是非常的好用的,本章节将简单介绍一下这两个事件的用法.在实际应用中可能需要监听一些输入框值的变化,当然我们可以使用onkeydown.onkeypress.onkeyup 等事件完成,但是这些事件并不能够监听右键复制.黏贴和剪切等功能,这个时候oninput和onpropertychange事件的威力就显现出来了,下面就介绍一下它们.一.oninput事件:此事件是HTML5中的标准事

oninput和onpropertychange实时监听输入框值的变化

传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydown.keypress事件是只要完成击键事件后就触发,不考虑输入框的值是否变化,也监听不了使用鼠标右键[剪贴]和[粘贴]这些操作,更监听不了使用JS动态改变值的变化.而change事件必须是焦点离开输入框后才触发,并不能实时监听.所以这几个事件来监听输入框值变化并不完美.ie浏览器(ie6-8)可以直接使用onpropertychange事件来实时监听(包括JS动态改变值

onchange, oninput和onpropertychange

onchange:触发事件必须满足两个条件: 1.绑定对象的值改变,并且是由键盘或鼠标事件激发的(脚本触发无效) 2.绑定对象失去焦点: oninput:此方法绑定于对象时,只有对象的value值发生改变时才会触发事件,可以在非IE浏览器中使用,在IE中失效. document.getElementById('#username').addEventListener('input', function () { // do something }, false); onpropertychang

[TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onfocus事件想法,当input框失去焦点时,触发该事件,比如将输入的文本,统一修改为小写 3. onchange事件 这个事件的发生需要具有2个条件: 失去焦点 内容发生了变化 4. oninput事件 这个时HTML5新加入的事件,IE9之前是不支持的,在IE9之前使用的是: onproperty

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

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上并不完善. onpropertychange属性可

总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码

总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeyd

oninput,onpropertychange,onchange的用法和区别

1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示"您还可以输入XX字".如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchange的区别和用法,以及onpropertychange在ie浏览器下的一个bug. 2.oninput,onpropertychange,onchange的用法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的