轉自:http://blog.csdn.net/itchiang/article/details/7769337javascript
要達到的效果html
不少狀況下咱們都會即時監聽輸入框值的變化,以便做出即時動做去引導瀏覽者加強網站的用戶體驗感。好比即時顯示輸入框已經被輸入的字節數,或者即時讀取輸入的值來進行搜索引導,也就是google的關聯搜索效果等。只要咱們能捕獲即時事件就能作到不少事情。java
須要瞭解的知識web
首先,咱們須要瞭解onchange和onpropertychange的不一樣:瀏覽器
IE下,當一個HTML元素的屬性改變的時候,都能經過 onpropertychange來即時捕獲。網絡
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才能夠激活該事件。測試
瞭解這一點後咱們發現onpropertychange的效果就是咱們想要的,但是很遺憾,它只在IE下有效果。咱們能不能找到另一個時間來代替onpropertychange呢?網站
通過翻閱資料得知,在其餘瀏覽器下可使用oninput事件來達到一樣的效果,真是太好了,咱們只須要把IE瀏覽器區分出來就能夠。ui
oninput的使用this
下面咱們先了解一下oninput如何使用。
若是您是將註冊時間直接寫在頁面裏面,那麼以下寫法就能夠實現:
可是,將oninput寫在JS代碼中分離出來時與普通事件註冊的方法有些不一樣,必須使用addEventListener來註冊。
attachEvent和addEventListener 的不一樣
說到這裏咱們再來了解一下 attachEvent和addEventListener 的使用方法:
attachEvent方法,爲某一事件附加其它的處理事件。(不支持Mozilla系列)
addEventListener方法 用於 Mozilla系列
舉例:
若是這樣寫,那麼將會只有medhot3被執行
寫成這樣:
執行順序爲method3->method2->method1
若是是Mozilla系列,並不支持該方法,須要用到addEventListener
執行順序爲method1->method2->method3
瞭解瞭如何使用addEventListener來註冊oninput事件後咱們再回到要解決的問題[劃分瀏覽器]。
判斷IE瀏覽器
如何將IE區分出來呢?
這彷佛是一個老生常談的問題,網絡中有不少找那個方法,歸類爲兩類:
其一,是判斷瀏覽器的功能屬性。
其二,就是判斷傳統的 user-agent 字符串,這多是最古老也是最流行的檢測方式。
在這裏就不作深刻了解了,咱們這裏用一種比較簡單的方法來判斷
到目前爲止咱們遇到的問題就已經解決了,開始寫代碼來測試咱們的思路是否可以實現。
完成代碼:
<!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>監聽輸入框值的即時變化 onpropertychange oninput</title> <script type="text/javascript"> function immediately(){ var element = document.getElementById("mytext"); if(window.ActiveXObject) { element.onpropertychange = webChange; }else{ element.addEventListener("input",webChange,false); } } function webChange(){ if(element.value){document.getElementById("test").innerHTML = element.value}; } </script> </head><body> 直接寫在頁面中的示例: <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 /> 寫在JS中的示例: <input type="text" name="textfield" id="mytext" /> <div>您輸入的值爲:<span id="test">還未輸入</span></div> <script type="text/javascript"> immediately(); </script> </body> </html>
太漂亮了,一次完成,預覽以上代碼,頁面中共實現兩兩種方式:第1、頁面中直接引用;第2、JS中引用。通過測試,兼容:IE六、IE七、IE八、Firefox、Opera、Chrome、Safari