jquery实时监听输入框值变化

【前言】

      分享一个jQuery实时监听输入框框值变化的方法，如有误解请指正

 

【主体】

      在做开发时经常需要即时监听输入框值的变化，以便作出即时动作，从而引导浏览者进行后续操作，以此增强网站的用户体验感。刚开始采用onchange，但这种方法往往是在输入框失去焦点（onblur）时候触发，有时候并不能满足条件。

     接下来向大家介绍一种完美的解决方案：结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。

 

    （1）oninput事件→在用户输入时触发

      HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。   

      简单理解：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

 

    （2）onpropertychange： IE下元素属性改变时触发

      当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。

      字面意思是能够监听property改变的事件，但是onpropertychange监听的是元素的property属性，并不只局限于value，也可以监听其他标准属性值，如：input的name值

 

    （3）onchange：在用户改变输入域的内容后，失焦时执行

      需要满足两个条件，1、当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）；2、当前对象失去焦点(onblur)；

 

      因此，可以采用以下代码实时监听输入框值变化

$("input").bind("input propertychange change",function(event){
        //代码块
});

 

【拓展】

    这里我用的bind来绑定事件，但是当遇到追加的新input标签时，就不能监听了。

    怎么解决这个问题呢？ 用live代替bind即可， live() 方法用于向尚未创建的元素添加事件处理器

$('input').live('input propertychange change', function(){
    //获取input下的所有 <input> 元素,并实时监听用户输入
})

 

 

【总结】

    （1）oninput： 是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效

    （2）从上面表格可以看出，oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发

    （3）汇总 onchange onpropertychange 和 oninput 事件的区别

            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=tru e后，onpropertychange 不会触发。

 

 【简单概括】

（1）onchange，该事件必须由鼠标或者键盘激发

$("xxx").on("change",function(){
  alert("变化了");
})

（2）ie有专属的方法，onpropertychange，仅支持ie内核的浏览器，同样必须由鼠标或者键盘激发

$("xxx").on("propertychange",function(){  
  alert("变化了");  
}) 

（3）ie之外的其他浏览器，比如firefox，opera，提供了oninput，同样必须有鼠标或者键盘激发，若想同时支持ie,firefox等浏览器，可以同时绑定两个事件。

$("xxx").on(" input propertychange",function(){
  alert("变化了");
})

如果要监听由脚本而不是键盘引起的input值改变，可以换个思路，既然是脚本引起的值改变，可以在引起变化的脚本处进行相应的操作。

 

 

 

.