JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例

更新時(shí)間：2014年03月07日 08:50:28 作者：

本篇文章主要是對(duì)JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

oninput,onpropertychange,onchange的用法

onchange觸發(fā)事件必須滿足兩個(gè)條件：

a）當(dāng)前對(duì)象屬性改變，并且是由鍵盤或鼠標(biāo)事件激發(fā)的（腳本觸發(fā)無效）

b）當(dāng)前對(duì)象失去焦點(diǎn)(onblur)；

onpropertychange的話，只要當(dāng)前對(duì)象屬性發(fā)生改變，都會(huì)觸發(fā)事件，但是它是IE專屬的；

oninput是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點(diǎn)不同，它綁定于對(duì)象時(shí)，并非該對(duì)象所有屬性改變都能觸發(fā)事件，它只在對(duì)象value值發(fā)生改變時(shí)奏效。

停止冒泡事件

if (e) //停止事件冒泡 e.stopPropagation();
else window.event.cancelBubble = true;

執(zhí)行上面的代碼，單擊輸入框發(fā)現(xiàn)也會(huì)觸發(fā)onpropertychange，輸入一個(gè)值同樣也會(huì)觸發(fā)這個(gè)事件，這就證明了，只要有屬性的值被修改就會(huì)觸發(fā)該事件。

第二、既然我們發(fā)現(xiàn)了這個(gè)特點(diǎn)，那就會(huì)有一個(gè)問題了：當(dāng)我們有時(shí)在輸入框值發(fā)生改變時(shí)希望執(zhí)行一個(gè)函數(shù)操作，但同時(shí)也要修改一個(gè)自定義的屬性，這樣onpropertychange就會(huì)被觸發(fā)兩次，這個(gè)可能并不是我們所希望的。
猜想一下，既然提供了這么一個(gè)屬性，那一定應(yīng)該能獲取到是哪個(gè)屬性被改變了。試著獲取參數(shù)個(gè)數(shù)及參數(shù)內(nèi)容。

XML/HTML代碼

復(fù)制代碼代碼如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){   
alert(arguments.length);   
for(var i=0;i<arguments.length;i++){   
alert(arguments[i]);   
}   
});   
-->  
</script>  

執(zhí)行上面一段代碼，會(huì)發(fā)現(xiàn)彈出了1和[object]，這說明該事件只給回調(diào)函數(shù)傳入一個(gè)參數(shù)而且是object類型。
那我們就試試遍歷一下這個(gè)object。

XML/HTML代碼

復(fù)制代碼代碼如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){   
for(var item in o){   
alert(item+":"+o[item]);   
}   
});   
//-->  
</script>  

執(zhí)行一下，發(fā)現(xiàn)有很多個(gè)屬性，但仔細(xì)看我們可能會(huì)發(fā)現(xiàn)這么一個(gè)屬性：propertyname，相信每個(gè)人都能猜到這個(gè)屬性的意思了。對(duì)，這個(gè)就是用來獲取哪個(gè)屬性被修改的。

XML/HTML代碼

復(fù)制代碼代碼如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){   
alert(o.propertyName);   
});   
//-->  
</script>  

分別單擊文本框和輸入一個(gè)值，會(huì)發(fā)現(xiàn)分別彈出了myprop和value。

再回到我們開始的問題，我們只需要判斷是否是value被改變就ok了。
直接看代碼吧：

XML/HTML代碼

復(fù)制代碼代碼如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){   
if(o.propertyName!='value')return;  //不是value改變不執(zhí)行下面的操作   
//.......函數(shù)處理   
});   
//-->  
</script>

您可能感興趣的文章: