文本框改变之onpropertychange事件

onpropertychange能够捕获每次输入值的变化。
例如:对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。
在文本框输入数据的时候,当键盘按下并放开的时候可以使用onkeyup来检测事件,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。可是有的时候我们输入数据是采用粘贴的方式而不是键盘输入,这就需要实时检测文本框状态的改变。
onpropertychange 不被firefox所支持,如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。 
写法:

<div id="msg"></div>
<input id='txt' value="" />
<script type="text/javascript">
//当状态改变的时候执行的函数
function handle() {
document.getElementById('msg').innerHTML = '输入的文字长度为:' + document.getElementById('txt').value.length;
}
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
if (/msie/i.test(navigator.userAgent)) //ie浏览器
{
document.getElementById('txt').onpropertychange = handle
}
else {//非ie浏览器,比如Firefox
document.getElementById('txt').addEventListener("input", handle, false);
}
</script>

猜你喜欢

转载自www.cnblogs.com/ITzhangyunpeng/p/9361559.html