監聽輸入框值的即時變化onpropertychange、oninput相容IE,Chrome,FF,Opera等
要達到的效果
很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。比如即時顯示輸入框已經被輸入的位元組數，或者即時讀取輸入的值來進行搜尋引導，也就是google的關聯搜尋效果等。只要我們能捕獲即時事件就能做到很多事情。
需要了解的知識
IE下，當一個HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以啟用該事件。
瞭解這一點後我們發現onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE下有效果。我們能不能找到另外一個時間來代替onpropertychange呢？
經過翻閱資料得知，在其他瀏覽器下可以使用oninput事件來達到同樣的效果，真是太好了，我們只需要把IE瀏覽器區分出來就可以。
oninput的使用
下面我們先了解一下oninput如何使用。
如果您是將註冊時間直接寫在頁面裡面，那麼如下寫法就可以實現：
但是，將oninput寫在JS程式碼中分離出來時與普通事件註冊的方法有些不同，必須使用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 字串，這可能是最古老也是最流行的檢測方式。
在這裡就不做深入瞭解了，我們這裡用一種比較簡單的方法來判斷
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>
太漂亮了，一次完成，預覽以上程式碼，頁面中共實現兩兩種方式：第一、頁面中直接引用；第二、JS中引用。
經過測試，相容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari
如有更好的解決辦法或者其他什麼問題可在評論中提出，歡迎批評。
相關推薦
監聽輸入框值的即時變化onpropertychange、oninput相容IE,Chrome,FF,Opera等
要達到的效果 很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。比如即時顯示輸入框已經被輸入的位元組數，或者即時讀取輸入的值來進行搜尋引導，也就是google的關聯搜尋效果等。只要我們能捕獲即時事件就能做到很多事情。 需要
js監聽輸入框值的即時變化onpropertychange、oninput、onchange
要達到的效果很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。比如即時顯示輸入框已經被輸入的位元組數，或者即時讀取輸入的值來進行搜尋引導，也就是google的關聯搜尋效果等。 只要我們能捕獲即時事件就能做到很多事情。 需要了解的知
實時監聽輸入框值變化的完美方案：oninput & onpropertychange
ner 監聽 jpg number ima 方案 radio 技術 search oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發生
實時監聽輸入框值變化的完美方案：oninput & onpropertychange(真正完美,支援ie9以下,ie10,chrome)
引用地址:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html 在 Web 開發中經常會碰到需要動態監聽輸入框值變化的情況，如果使
實時監聽輸入框值變化:oninput & onpropertychange
需求：輸入名稱的時候，邊輸入邊自動顯示名稱的拼音碼和五筆碼 解決方案： 一開始想到使用onchange事件，但發現onchange需要失去焦點才觸發 於是上網查詢資料，知道oninput &
js/jquery 實時監聽輸入框值變化的完美方案：oninput & onpropertychange
<script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) {
jquery實時監聽輸入框值變化
property per 並且 details dom 支持 觸發事件 java 不能 在做web開發時候很多時候都需要即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的用戶體驗感。而采用onchange時間又往往是在輸入框失去焦點（onblur）時候觸發，有時
HTML5 oninput實時監聽輸入框值變化的完美方案
在網頁開發中經常會碰到需要動態監聽輸入框值變化的情況，如果使用 onkeydown、onkeypress、onkeyup 這個幾個鍵盤事件來監測的話，監聽不了右鍵的複製、剪貼和貼上這些操作，處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案：結合html5標準事
Js（Jquery）實時監聽input輸入框值的變化
效果圖 Js寫法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&
實時監聽input輸入框值的變化例項
1、在元素上同時繫結 oninput 和onporpertychanger事件 <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script>
js監聽輸入框內容變化事件
如果你在實現“統計input、textarea文字框輸入字數”中遇到問題，閱讀本文或許可以幫助你解決這個棘手的問題！ 手機頁面開發，要統計textareal文字框輸入字數，使用onkeyup雖然可以監聽到輸入框的文字字數變化，但在iphone下有個問題：
如何實時監聽輸入框的值？
想實現的效果：當輸入框的值為空時，查詢按鈕的顏色不改變，預設為灰色；當輸入值之後，查詢按鈕顏色改變。 簡單來說就是，想讓查詢按鈕的背景顏色根據文字框輸入的值動態變化。 想實現的效果圖： 未輸入時的狀態： 輸入完成時的效果： 問題描述：
設定EditText的提示文字大小,監聽輸入框內容變化
我們經常會使用到EditText這個控制元件,然後在沒有輸入任何文字的時候,總會顯示hint提示文字,但是有的時候需要去改變這個提示文字的大小以及監聽輸入框的內容變化,以便顯示/隱藏輸入框後面的刪除文
vue watch怎樣同時監聽兩個值的變化並執行方法？
用computed定義一個address物件吧，然後再去watch addres data() { return { city: '', country: '' } }, computed: { address() { const { city, countr
總結propertychange input監聽輸入框
常常會有輸入框檢查的需求，最常見的就是即時搜尋。 即時搜尋的三個方案： change事件 （1）change事件 發事件必須滿足兩個條件：當前物件屬性改變並且是由鍵盤或滑鼠事件激發的（指令碼觸發無效）當前物件失去焦點(onblur) keypress （2）keypress 能監聽鍵盤事
Angular中使用 watch監聽object屬性值的變化
Angular中的$watch可以監聽屬性值的變化，然後並做出相應處理。 常見用法：$scope.$watch("person", function(n, o){ //todo something...})123但是對於一個物件中的某個屬性值變化時，$watch
android EditText 實時監聽輸入框的內容
在開發中很多時候我們都會用到EditText，對輸入內容的實時監聽也是不可或缺的。 在android中為我們提供了TextWatcher這個類，我們只要extends這個類然後etColler.addTextChangedListener(editclick);就可以實時監
JS實時監聽輸入框中的內容
有時候我們需要實時監聽輸入框中值得變化，這裡得實時監聽是指當我們獲取到輸入框焦點，並在其中鍵入字元的時候，我們可以監聽到當每次鍵入字元後，獲取輸入框中的內容。如下圖 當在上邊的輸入框中每次輸
如何監聽input中值的變化，該值是通過val()回填的，並且該input是hidden
<input type="hidden" name="CUSTOMER_ID" id="CUSTOMER_ID" value="<!--{$data.CUSTOMER_ID}-->" /> <input type="text" readonly
android之監聽某個資料庫值的變化
1、在onCreate 函式中註冊監聽：其中CONTENT_URI 部分就是你關心的資料庫欄位的URI地址 getApplicationContext().getContentResolver().registerContentObserver(CONTENT_URI, t