onchange不足之處 onpropertychange

一、onchange
一般input type text的onchange事件的觸發需要兩個條件:1.輸入框的值發生了改變;2.該文本框失去了焦點,而真正的事件的觸發卻是發生在該文本框失去焦點的時候,如果需要當值改變的時候就去觸發,則需要用onpropertychange或者是oninput。
二、onpropertychange/oninput
1.在IE下,可以用onpropertychange來代替onchange事件,當文本框有任何變化時,能立即觸發此事件.
2.在其他瀏覽器下可以使用oninput事件來達到onpropertychange事件同樣的效果
三、使用onpropertychange/oninput的兩種方式
1.在頁面直接使用
<input type="text" name="myname" οninput="alert(this.value);" onpropertychange="alert(this.value)" />
2.把他們分離到js中的使用
注意在js中使用他們的時候oninput和普通事件註冊的方法有些不同,必須使用addEventListener來註冊。
<script type="text/javascript">
function testdemo(){
var element = document.getElementById("myname");
if("/v"=="v") {
element.onpropertychange = textChange;
}else{
element.addEventListener("input",textChange,false);
}
function textChange(){
   alert(element.value);
}
}
</script>
<body>
<input type="text" name="myname" id="myname" />
<script type="text/javascript">
testdemo();
</script>
</body>
經過測試,兼容:IE6、IE7、IE8、Firefox

發佈了62 篇原創文章 · 獲贊 9 · 訪問量 17萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章