首頁 > 其他

js監聽輸入框值的即時變化onpropertychange、oninput

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

要達到的效果
很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。比如即時顯示輸入框已經被輸入的位元組數，或者即時讀取輸入的值來進行搜尋引導，也就是google的關聯搜尋效果等。
只要我們能捕獲即時事件就能做到很多事情。
需要瞭解的知識
首先，我們需要瞭解onchange和onpropertychange的不同：
IE下，當一個HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以啟用該事件。
瞭解這一點後我們發現onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE下有效果。我們能不能找到另外一個時間來代替onpropertychange呢？
經過翻閱資料得知，在其他瀏覽器下可以使用oninput事件來達到同樣的效果，真是太好了，我們只需要把IE瀏覽器區分出來就可以。
oninput的使用
下面我們先瞭解一下oninput如何使用。
如果您是將註冊時間直接寫在頁面裡面，那麼如下寫法就可以實現：
<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
但是，將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("\v"=="v") {
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("\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>

直接寫在頁面中的樣本： 複製代碼 代碼如下:<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>

太漂亮了，一次完成，預覽以上代碼，頁面中共實現兩兩種方式：第一、頁面中直接引用；第二、JS中引用。
經過測試，相容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More