JS判斷文本框內容改變事件的簡單實例

 本篇文章主要是對JS判斷文本框內容改變事件的簡單實例進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

oninput,onpropertychange,onchange的用法   onchange觸發事件必須滿足兩個條件：   a）當前對象屬性改變，並且是由鍵盤或鼠標事件激發的（腳本觸發無效）   b）當前對象失去焦點(onblur)；    onpropertychange的話，只要當前對象屬性發生改變，都會觸發事件，但是它是IE專屬的；          oninput是onpropertychange的非IE浏覽器版本，支持firefox和opera等浏覽器，但有一點不同，它綁定於對象時，並非該對象所有屬性改變都能觸發事件，它只在對象value值發生改變時奏效。   停止冒泡事件   if (e) //停止事件冒泡 e.stopPropagation();  else  window.event.cancelBubble = true;   執行上面的代碼，單擊輸入框發現也會觸發onpropertychange，輸入一個值同樣也會觸發這個事件，這就證明了，只要有屬性的值被修改就會觸發該事件。   第二、既然我們發現了這個特點，那就會有一個問題了：當我們有時在輸入框值發生改變時希望執行一個函數操作，但同時也要修改一個自定義的屬性，這樣onpropertychange就會被觸發兩次，這個可能並不是我們所希望的。 猜想一下，既然提供了這麼一個屬性，那一定應該能獲取到是哪個屬性被改變了。試著獲取參數個數及參數內容。   XML/HTML代碼    代碼如下: <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">   <script type="text/javascript">   <!--    document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){    alert(arguments.length);    for(var i=0;i<arguments.length;i++){    alert(arguments[i]);    }    });    -->   </script>     執行上面一段代碼，會發現彈出了1和[object]，這說明該事件只給回調函數傳入一個參數而且是object類型。 那我們就試試遍歷一下這個object。   XML/HTML代碼  代碼如下: <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">   <script type="text/javascript">   <!--    document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){    for(var item in o){    alert(item+":"+o[item]);    }    });    //-->   </script>     執行一下，發現有很多個屬性，但仔細看我們可能會發現這麼一個屬性：propertyname，相信每個人都能猜到這個屬性的意思了。對，這個就是用來獲取哪個屬性被修改的。   XML/HTML代碼  代碼如下: <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">   <script type="text/javascript">   <!--    document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){    alert(o.propertyName);    });    //-->   </script>     分別單擊文本框和輸入一個值，會發現分別彈出了myprop和value。   再回到我們開始的問題，我們只需要判斷是否是value被改變就ok了。 直接看代碼吧：   XML/HTML代碼    代碼如下: <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">   <script type="text/javascript">   <!--    document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){    if(o.propertyName!='value')return;  //不是value改變不執行下面的操作    //.......函數處理    });    //-->   </script>