監聽HTML input輸入框值的即時變化onpropertychange、oninput兼容IE,Chrome,FF,Opera等

時間 2019-11-20

標籤監聽 html input 輸入即時變化 onpropertychange oninput 兼容 chrome opera 欄目 HTML 简体版

原文原文鏈接

轉自：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系列

舉例:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

若是這樣寫,那麼將會只有medhot3被執行

寫成這樣：

var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

執行順序爲method3->method2->method1

若是是Mozilla系列，並不支持該方法，須要用到addEventListener

var btn1Obj = document.getElementById("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

執行順序爲method1->method2->method3

瞭解瞭如何使用addEventListener來註冊oninput事件後咱們再回到要解決的問題[劃分瀏覽器]。

判斷IE瀏覽器

如何將IE區分出來呢？
這彷佛是一個老生常談的問題，網絡中有不少找那個方法，歸類爲兩類：
其一，是判斷瀏覽器的功能屬性。
其二，就是判斷傳統的 user-agent 字符串，這多是最古老也是最流行的檢測方式。
在這裏就不作深刻了解了，咱們這裏用一種比較簡單的方法來判斷

if( window.ActiveXObject) {
alert("IE");
}else{
alert("NO");
}

到目前爲止咱們遇到的問題就已經解決了，開始寫代碼來測試咱們的思路是否可以實現。

完成代碼：

<!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>