快捷導(dǎo)航

js監(jiān)聽(tīng)輸入框值的即時(shí)變化onpropertychange、oninput

更新時(shí)間：2011年07月13日 17:00:10 作者：

很多情況下我們都會(huì)即時(shí)監(jiān)聽(tīng)輸入框值的變化，以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶(hù)體驗(yàn)感。

要達(dá)到的效果
很多情況下我們都會(huì)即時(shí)監(jiān)聽(tīng)輸入框值的變化，以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶(hù)體驗(yàn)感。比如即時(shí)顯示輸入框已經(jīng)被輸入的字節(jié)數(shù)，或者即時(shí)讀取輸入的值來(lái)進(jìn)行搜索引導(dǎo)，也就是google的關(guān)聯(lián)搜索效果等。
只要我們能捕獲即時(shí)事件就能做到很多事情。
需要了解的知識(shí)
首先，我們需要了解onchange和onpropertychange的不同：
IE下，當(dāng)一個(gè)HTML元素的屬性改變的時(shí)候，都能通過(guò) onpropertychange來(lái)即時(shí)捕獲。
onchange在屬性值改變時(shí)還必須使得當(dāng)前元素失去焦點(diǎn)(onblur)才可以激活該事件。
了解這一點(diǎn)后我們發(fā)現(xiàn)onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE下有效果。我們能不能找到另外一個(gè)時(shí)間來(lái)代替onpropertychange呢？
經(jīng)過(guò)翻閱資料得知，在其他瀏覽器下可以使用oninput事件來(lái)達(dá)到同樣的效果，真是太好了，我們只需要把IE瀏覽器區(qū)分出來(lái)就可以。
oninput的使用
下面我們先了解一下oninput如何使用。
如果您是將注冊(cè)時(shí)間直接寫(xiě)在頁(yè)面里面，那么如下寫(xiě)法就可以實(shí)現(xiàn)：
<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
但是，將oninput寫(xiě)在JS代碼中分離出來(lái)時(shí)與普通事件注冊(cè)的方法有些不同，必須使用addEventListener來(lái)注冊(cè)。
attachEvent和addEventListener 的不同
說(shuō)到這里我們?cè)賮?lái)了解一下 attachEvent和addEventListener 的使用方法：
attachEvent方法，為某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法用于 Mozilla系列
舉例:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫(xiě),那么將會(huì)只有medhot3被執(zhí)行
寫(xiě)成這樣：
var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執(zhí)行順序?yàn)閙ethod3->method2->method1
如果是Mozilla系列，并不支持該方法，需要用到addEventListener
var btn1Obj = document.getElementById("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執(zhí)行順序?yàn)閙ethod1->method2->method3
了解了如何使用addEventListener來(lái)注冊(cè)oninput事件后我們?cè)倩氐揭鉀Q的問(wèn)題[劃分瀏覽器]。
判斷IE瀏覽器
如何將IE區(qū)分出來(lái)呢？
這似乎是一個(gè)老生常談的問(wèn)題，網(wǎng)絡(luò)中有很多找那個(gè)方法，歸類(lèi)為兩類(lèi)：
其一，是判斷瀏覽器的功能屬性。
其二，就是判斷傳統(tǒng)的 user-agent 字符串，這可能是最古老也是最流行的檢測(cè)方式。
在這里就不做深入了解了，我們這里用一種比較簡(jiǎn)單的方法來(lái)判斷

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

 
if("\v"=="v") { 
alert("IE"); 
}else{ 
alert("NO"); 
} 

到目前為止我們遇到的問(wèn)題就已經(jīng)解決了，開(kāi)始寫(xiě)代碼來(lái)測(cè)試我們的思路是否能夠?qū)崿F(xiàn)。
完成代碼：

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="auther" content="fq" /> 
<title>監(jiān)聽(tīng)輸入框值的即時(shí)變化 onpropertychange oninput</title> 
<script type="text/javascript"> 
function immediately(){ 
var element = document.getElementById("mytext"); 
if("\v"=="v") { 
element.onpropertychange = webChange; 
}else{ 
element.addEventListener("input",webChange,false); 
} 
function webChange(){ 
if(element.value){document.getElementById("test").innerHTML = element.value}; 
} 
} 
</script> 
</head> 
<body> 

直接寫(xiě)在頁(yè)面中的示例：

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

 
<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" /> 
<div>您輸入的值為：<span id="webtest">還未輸入</span></div> 
<br /><br /><br /><br /><br /> 
寫(xiě)在JS中的示例： 
<input type="text" name="textfield" id="mytext" /> 
<div>您輸入的值為：<span id="test">還未輸入</span></div> 
<script type="text/javascript"> 
immediately(); 
</script> 
</body> 
</html> 

太漂亮了，一次完成，預(yù)覽以上代碼，頁(yè)面中共實(shí)現(xiàn)兩兩種方式：第一、頁(yè)面中直接引用；第二、JS中引用。
經(jīng)過(guò)測(cè)試，兼容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari

您可能感興趣的文章: