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 其他版本都是正常的。