实时监听输入框值变化的完美方案：oninput & onpropertychange（keydown，keypress，keyup事件不触发问题）

问题由来：做了一个 注册发送验证砝码的效果，这里做了些交互，只有当用户输入的手机号位数达到11位的时候。发送按钮 变成可点击状态！！！

项目之前写的用的 keyup事件！！

我们实测没有发现问题。客户反应有个别手机不起作用！！！我擦勒，个别不起作用。那也尝试改改吧。于是接触到HTML5的oninput事件

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

oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

• 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
• 修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
• 修改了 select 元素的选中项，selectedIndex 属性发生变化。

　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

 

使用方法：

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

1 2 3

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

 

案例：

<p>在文本框中尝试输入触发函数。</p>
<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>