JS上使用OnPropChanged和OnInput

此文为转载，可以让自己方便查看。

在 Web应用开发过程中时常会碰到需要动态监听输入框值变化的情况，比如需要用js动态验证简单的规则，大家首先想到的可能是 onkeydown、onkeypress、onkeyup、onchange 这几个事件来监听输入变化，但是这些事件不能监听右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此今天这篇文章向大家介绍一种完美的解决方案：结合 oninput 和 onpropertychange 事件来监听输入框值变化。

首先我们来看几个事件的说明和互相的区别：

1. onchange事件：在内容改变（两次内容有可能相等）且失去焦点时触发；
2. onpropertychange事件：是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。
3. oninput事件：是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触发。（IE9以上版本支持oninput）
4. oninput事件和onpropertychange事件的区别
   onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方法与一般事件相同。
5. oninput与onpropertychange失效的情况：
   oninput事件：
   （1）当脚本中改变value时，不会触发；
   （2）从浏览器的自动下拉提示中选取时，不会触发；
   onpropertychange事件：
   （1）当input设置为disable=true后，不会触发。
   修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
   修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
   修改了 select 元素的选中项，selectedIndex 属性发生变化。
   在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

完美监听输入框内容变化的示例代码如下：

用户名js实时验证实例代码

    
        
        
        
        
    
    
        请输入用户名：
        
    

使用 jQuery 库的话，只需要同时绑定 on input 和 onpropertychange 两个事件就可以了， 示例代码如下：

jQuery实例代码JavaScript

$('input[name="username"]').bind('input propertychange', function() {
    checkusername($(this).val());
});

使用 jQuery 库的话，只需要同时绑定 on input 和 onpropertychange 两个事件就可以了， 示例代码如下：

jQuery实例代码

转载自：IT视界
地址：js实时验证input内容变化|文本框变化监听|oninput & onpropertychange