1. 首頁 > 生活經驗 > >

兼容Firefox和IE的onpropertychange事件oninput

在文本框輸入數據的時候，當鍵盤按下并放開的時候可以使用onkeyup來檢測事件，onpropertychange能夠捕獲每次改變，而onchange需要執行某個事件才可以捕獲 。可是有的時候我們輸入數據是采用粘貼的方式而不是鍵盤輸入 ， 這就需要實時檢測文本框狀態的改變 。
onpropertychange不被firefox所支持，如果想在firefox下正常使用,需要用oninput屬性,且需要用addEventListener來注冊事件 。
//當狀態改變的時候執行的函數 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); }
[Ctrl A 全選 注:如需引入外部Js需刷新才能執行]
例子：
復制代碼 代碼如下:
html
body
divoninput測試/div
divid="testdiv"inputid=’tx1’name="tx1"value=""http://div
/body
/html
scriptlanguage="JavaScript"
!--
functiongetOs(){//判斷瀏覽器類型
varOsObject="";
if(navigator.userAgent.indexOf("MSIE")0){
return"MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")0){
return"Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")0){
return"Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")0){
return"Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")0){
return"Gecko";
}

}

if(navigator.userAgent.indexOf("MSIE")0){
document.getElementById(’tx1’).attachEvent("onpropertychange",txChange);
}elseif(navigator.userAgent.indexOf("Firefox")0){
document.getElementById(’tx1’).addEventListener("input",txChange2,false);
}
functiontxChange(){
alert("testie");
}
functiontxChange2(){
alert("testfirefox");
}
/script

以上就是兼容Firefox的onpropertychange事件方法 。您可能感興趣的文章:輸入框的字數時時統計—關于 onpropertychange 和 oninput 使用js監聽輸入框值的即時變化onpropertychange、oninputjavascript開發中使用onpropertychange,oninput事件解決onchange事件的不足asp.net關于onpropertychange和oninput事件實現代碼js propertychange和oninput事件

相關經驗推薦