oninput,onpropertychange,onchange的用法和區別

1、前言

    因爲工做須要，需實現一個相似於微博輸入框的功能，在用戶動態輸入文字的時候，修改提示「您還能夠輸入XX字」。以下圖所示：

  

所以，稍微研究了一下oninput,onpropertychange,onchange的區別和用法，以及onpropertychange在ie瀏覽器下的一個bug。

2、oninput,onpropertychange,onchange的用法

l          onchange觸發事件必須知足兩個條件：

    a）當前對象屬性改變，而且是由鍵盤或鼠標事件激發的（腳本觸發無效）

    b）當前對象失去焦點(onblur)；

l          onpropertychange的話，只要當前對象屬性發生改變，都會觸發事件，可是它是IE專屬的；

l          oninput是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不一樣，它綁定於對象時，並不是該對象全部屬性改變都能觸發事件，它只在對象value值發生改變時奏效。

在textarea中，若是想捕獲用戶的鍵盤輸入，用onkeyup檢查事件就能夠了，可是onkeyup並不支持複製和粘貼，所以須要動態監測textarea中值的變化，這就須要onpropertychange（用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一塊兒使用了。

3、代碼實現：

第一種方法是直接寫入textarea的onpropertychange和oninput屬性

<textarea id="wb_comment_content" name="wb_comment_content" onblur="blur_wb_textarea(this);" onfocus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" oninput="set_alert_wb_comment();" class="gary666" style="font-size:12px;" mce_style="font-size:12px;">歡迎您天天來微評哦……

若是想要用JavaScript設置textarea的屬性，需以下：

if(isIE)  
{  
    document.getElementById("wb_comment_content").onpropertychange = set_alert_wb_comment();  
}  
else //須要用addEventListener來註冊事件  
{  
    document.getElementById("wb_comment_content").addEventListener("input", set_alert_wb_comment, false);  
}

其他函數

function click_wb_textarea(obj){  
    if(obj.value==obj.defaultValue)  
    {  
        obj.value="";  
    }  
    //obj.className="";       //這樣設置類名在ie下會有在輸入第一個字符的時候onpropertychange不會觸發的bug  
    obj.style.color="#000";  
    return false;  
}  
function blur_wb_textarea(obj){  
    if(obj.value==""){  
        //obj.className="gary666";  
        obj.style.color="#666";  
        obj.value= obj.defaultValue;  
    }  
    return false;  
}

4、onpropertychange的bug

    在代碼實現時，發如今響應用戶onclick了textarea時，若是使用obj.className="XX";來改變textarea輸入框中字體的樣式，會致使在ie下會有在輸入第一個字符的時候onpropertychange不會觸發的bug，所以須要這樣設置：obj.style.color="#000";