HTML5实时监听输⼊框值变化
在⽹页开发中经常会碰到需要动态监听输⼊框值变化的情况，如果使⽤ onkeydown、onkeypress、onkeyup 这个⼏个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很⿇烦。
因此这篇⽂章向⼤家介绍⼀种完美的解决⽅案：结合html5标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输⼊框值变化。
对于检测 textarea, input:text, input:password 和 input:search 这⼏个元素通过⽤户界⾯发⽣的内容变化⾮常有⽤，在内容修改后⽴即被触发，不像 onchange 事件需要失去焦点才触发。
主流浏览器基本都⽀持oninput事件，IE9以下不⽀持，需要使⽤ IE 特有的 onpropertychange 事件替代，这个事件在⽤户界⾯改变或者使⽤脚本直接修改内容两种情况下都会触发，有以下⼏种情况：
1、修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发⽣变化。
2、修改了 input:text 或者 textarea 元素的值，value 属性发⽣变化。
3、修改了 select 元素的选中项，selectedIndex 属性发⽣变化。
在监听到onpropertychange事件后，可以使⽤ event 的 propertyName 属性来获取发⽣变化的属性名称。
集合 oninput & onpropertychange 监听输⼊框内容变化的⽰例代码如下：
<head>
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
htmlradio添加切换事件
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (LowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>
</head>
<body>
Please modify the contents of the text field.
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>
使⽤jQuery的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，⽰例代码如下：
$('input').on('input propertychange', function() {
alert($(this).val().length + ' characters');
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。