监听文本框内容改变事件之oninput、onchange与onpropertychange事件的用法和区别_仲因的博客

监听文本框内容改变事件是一个很常见的需求，比如动态提示还能输入多少字。但是在实际应用的过程中，会有很多意想不到的坑。

onchange事件

只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效

onkeydown/onkeypress/onkeyup
在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善

onpropertychange
此属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的

oninput
HTML5中的标准事件，不过IE9以下的浏览器是不支持oninput事件的。

针对上面的分析，我们应当对所有ie使用onpropertychange，其他浏览器用oninput来实现我们的需求

var ie = !!window.ActiveXObject;  
if(ie){  
    object.onpropertychange = fn;  
}else{  
    object.addEventListener("input",fn,false);  
jQuery可用以下代码 
$('input,textarea').on('input propertychange', function(e){
1、onchange事件与onpropertychange事件的区别： 
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；
onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。 
2、oninput事件与onpropertychange事件的区别： 
oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；
onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，
oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。
（此处都是指在js中动态绑定事件，以实现内容与行为分离） 
3、oninput与onpropertychange失效的情况： 
（1）oninput事件：
              a). 当脚本中改变value时，不会触发；
              b).从浏览器的自动下拉提示中选取时，不会触发。 
（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。 
转自点击这里
                    监听文本框内容改变事件是一个很常见的需求，比如动态提示还能输入多少字。但是在实际应用的过程中，会有很多意想不到的坑。onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效
				onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.
这样一来问题就解决了.
那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.
但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.
好了, 以下是演示例子, 主流浏览器都没问题: 
on用onpropertychange,oni
				input元素的oninput事件和onchange事件
1、input元素上绑定事件的三种方式：
第一种：直接在元素标签上添加oninput属性，属性值为处理事件函数的调用
<input type="text" id="input" oninput="handleInput()"></input>
function handleInput() {
	// 处理事件代码
onchange事件是当标签的内容改变且失去焦点时触发；
	oninput事件是输入框的值发生改变时就触发。
在React中的onInput与onChange事件并没有什么区别，都是在用户输入时持续触发，如果要达到原生onchange事件的效果，需要onBlur事件配合使用。
onchange 事件会在域的内容改变时触发。支持的标签, , ,。
注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。
缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的function() 或者调.change()方法。
<input type="text" id="cc" o...
				相同点：1，都是只改变之后会触发的事件
不同点：1，oninput作用于 input 和 textarea 元素，而onchange还作用于 keygen 和 select（下拉框） 元素
2，oninput是在值改变的时候立即触发，onchange是在值改变了，并且失去焦点时才触发
所以oninput可以实现的功能是滑杆选择数据，然后实时展示滑杆的值，html代码如下：
    <script>
        function numChange(){
				input 文本框内容改变，我们可以使用onchange或者onblur来进行判断，但是onchange是在文本内容改变，然后失去焦点的时候发生，onblur是在失去焦点时候发生，不会自己去判断。
网上一位老兄采用如此方法：
<input type="text" id="testId" readonly onPropertyChange="showValue(this.valu...
				oninput,onpropertychange,onchange的用法
onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的，如果得用javascript改变触发对象的属性时，
          并不能触发onchange事件；
b）当前对象失去焦点(onblur)；
onpropertychange 顾名思义，就是prop
				本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下：
最近做过一个项目，需求是下拉框里自动匹配关键字，具体细节是实时监听文本框 value 值的变化，然后匹配相关内容。
初接项目，首先想到的是 JQ 里的 change，但是马上排除此方法，因为 change 是在文本框失去焦点时才会触发。曲线救国一下，想到用 ...
在 HTML 中，可以使用 <input> 元素来创建文本框。在文本框中输入文本时，可以触发一些事件，比如当用户输入时触发、当文本框的值改变时触发等等。其中，oninput 事件可以在用户在文本框中输入内容时触发，具体来说，当文本框的值发生变化时就会触发 oninput 事件。
例如，可以使用以下代码向文本框添加 oninput 事件的监听器：
```html
<input type="text" oninput="myFunction()">
在这个例子中，当用户在文本框中输入内容时，就会触发 myFunction() 函数。
因此，本题答案是选项 B、oninput。选项 A、onclick 会在用户单击文本框时触发；选项 C、onmouseover 会在鼠标指针移动到文本框上时触发；选项 D、onchange 会在文本框的值改变时触发，但它不是即时触发，而是在用户离开文本框时触发。