input標籤內容改變觸發的事件詳解（附範例）

這篇文章帶給大家的內容是關於input標籤內容改變觸發的事件詳解（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

原生方法

onchange事件

<input>

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

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

oninput事件

<input>

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

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

onpropertychange事件

onpropertychange事件是即時觸發，每增加或刪除一個字元就會觸發，透過js改變也會觸發該事件，但是該事件是IE專有。
當input設定為disable=true後，不會觸發。

oninput事件與onpropertychange事件的區別：

##oninput事件與onpropertychange事件的區別：

##oninput事件與onpropertychange事件的區別：

##oninput事件都會觸發，而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>

使用jQuery

只需要同時綁定oninput 和onpropertychange 兩個事件就可以了，範例程式碼如下：

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

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

以上是input標籤內容改變觸發的事件詳解（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！