此文为转载，可以让自己方便查看。
在 Web应用开发过程中时常会碰到需要动态监听输入框值变化的情况，比如需要用js动态验证简单的规则，大家首先想到的可能是 onkeydown、onkeypress、onkeyup、onchange 这几个事件来监听输入变化，但是这些事件不能监听右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此今天这篇文章向大家介绍一种完美的解决方案：结合 oninput 和 onpropertychange 事件来监听输入框值变化。
首先我们来看几个事件的说明和互相的区别：
onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，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实时验证实例代码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>及时验证</title> <style> #error{ color:red; font-weight:bold; </style> <script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) { //alert ("The new content: " + event.target.value); var value = event.target.value; checkusername(value); // Internet Explorer function OnPropChanged (event) { console.info(event) if (event.propertyName.toLowerCase () == "value") { var value = event.srcElement.value; checkusername(value); //验证用户名方法(只能是数字字母和中文，不能包括特殊字符) function checkusername(value){ var regex = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/; if(regex.test(value) == true){ //格式正确 document.getElementById("error").innerHTML=""; }else{ //格式错误 document.getElementById("error").innerHTML="用户名格式错误，用户名由数字、字母、中文组成，不能包含特殊字符"; </script> </head> 请输入用户名： <input name="username" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" placeholder="数字、字母、汉字" /><label id="error"></label> </body> </html>使用 jQuery 库的话，只需要同时绑定 on input 和 onpropertychange 两个事件就可以了， 示例代码如下：
jQuery实例代码JavaScript
$('input[name="username"]').bind('input propertychange', function() {
checkusername($(this).val());