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屬性
[c-sharp] view plaincopyprint?
<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;">歡迎您每天來微評愛車哦……
<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();" style="font-size:12px;" mce_style="font-size:12px;">歡迎您每天來微評愛車哦……
如果想要用JavaScript設置textarea的屬性，需如下：
[c-sharp] view plaincopyprint?
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);
}
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);}
其餘函數
[c-sharp] view plaincopyprint?
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;
}
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";