input標籤內容改變觸發的事件

原生方法

onchange事件

<input type="text" onchange="onc(this)">

function onc(data){
    console.log(data.value);
}

onchange事件在內容改變且失去焦點的時候觸發。即，失去焦點了內容未變不觸發，內容變了未失去焦點也不實時觸發。
js直接更改value值時不觸發

oninput事件

<input id="inp" type="text" oninput="inp(this)">

function inp(data) {
    console.log(data.value)
}

oninput事件在輸入內容改變的時候實時觸發。oninput事件是IE以外的大多數瀏覽器支持的事件，在value改變時實時觸發。
js直接更改value值時不觸發。

onpropertychange事件

onpropertychange事件是實時觸發，每增長或刪除一個字符就會觸發，經過js改變也會觸發該事件，可是該事件是IE專有。
當input設置爲disable=true後，不會觸發。

oninput事件與onpropertychange事件的區別：

onpropertychange事件是任何屬性改變都會觸發，而oninput卻只在value改變時觸發，oninput要經過addEventListener()來註冊，onpropertychange註冊方法與通常事件相同。

oninput與onpropertychange聯合使用

　　oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素經過用戶界面發生的內容變化很是有用，在內容修改後當即被觸發，不像 onchange 事件須要失去焦點才觸發。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" />

使用 jQuery

只須要同時綁定 oninput 和 onpropertychange 兩個事件就能夠了，示例代碼以下：

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

　　最後須要注意的是：oninput 和 onpropertychange 這兩個事件在 IE9 中都有個小BUG，那就是經過右鍵菜單菜單中的剪切和刪除命令刪除內容的時候不會觸發，而 IE 其餘版本都是正常的。