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" οnblur="blur_wb_textarea(this);" οnfοcus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" οninput="set_alert_wb_comment();" class="gary666" style="font-size:12px;" mce_style="font-size:12px;">歡迎您每天來微評愛車哦……?
<textarea id="wb_comment_content" name="wb_comment_content" οnblur="blur_wb_textarea(this);" οnfοcus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" οninput="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);??
}?
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);
}

其余函數

view plaincopy to clipboardprint?
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";

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/sunlylorn/archive/2011/01/07/6123355.aspx

總結

以上是生活随笔為你收集整理的oninput,onpropertychange,onchange的用法和区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。