javascript --- 實時監聽輸入框值的變化

　　實時監聽文本框值變化是很是常見的功能，一般最簡單的辦法就是用keyup,keydown來實現，可是這種方法有兩個問題，一個是當直接複製粘貼的時候無法監聽到事件，另一個問題是在移動端，使用刪除鍵刪除輸入時候也沒法監聽到！

解決辦法：

一、使用onchange事件

onchange事件是文本框內容改變並失去焦點的時候才觸發。

二、比較完美的解決辦法：oninput和onproper

oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素經過用戶界面發生的內容變化很是有用，在內容修改後當即被觸發，不像 onchange 事件須要失去焦點才觸發。oninput 事件在主流瀏覽器的兼容狀況以下：

從上面表格能夠看出，oninput 事件在 IE9 如下版本不支持，須要使用 IE 特有的 onpropertychange 事件替代，這個事件在用戶界面改變或者使用腳本直接修改內容兩種狀況下都會觸發，有如下幾種狀況：

• 修改了 input:checkbox 或者 input:radio 元素的選擇中狀態， checked 屬性發生變化。
• 修改了 input:text 或者 textarea 元素的值，value 屬性發生變化。
• 修改了 select 元素的選中項，selectedIndex 屬性發生變化。

在監聽到 onpropertychange 事件後，可使用 event 的 propertyName 屬性來獲取發生變化的屬性名稱。

集合 oninput & onpropertychange 監聽輸入框內容變化的示例代碼以下：

// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {

       alert ("The new content: " + event.target.value);
}

// Internet Explorer
function OnPropChanged (event) {

if (event.propertyName.toLowerCase () == "value") {
           alert ("The new content: " + event.srcElement.value);
     }
}

 

頁面結構以下：

<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

 

而後調用函數：

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});