input標簽內(nèi)容改變觸發(fā)事件的案例分析

這篇文章將為大家詳細講解有關(guān)input標簽內(nèi)容改變觸發(fā)事件的案例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

原生方法

onchange事件

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

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

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

oninput事件

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

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

oninput事件在輸入內(nèi)容改變的時候?qū)崟r觸發(fā)。oninput事件是IE之外的大多數(shù)瀏覽器支持的事件，在value改變時實時觸發(fā)。
js直接更改value值時不觸發(fā)。

onpropertychange事件

onpropertychange事件是實時觸發(fā)，每增加或刪除一個字符就會觸發(fā)，通過js改變也會觸發(fā)該事件，但是該事件是IE專有。
當input設(shè)置為disable=true后，不會觸發(fā)。

oninput事件與onpropertychange事件的區(qū)別：

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

oninput與onpropertychange聯(lián)合使用

　　oninput 是 HTML5 的標準事件，對于檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發(fā)生的內(nèi)容變化非常有用，在內(nèi)容修改后立即被觸發(fā)，不像 onchange 事件需要失去焦點才觸發(fā)。oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，這個事件在用戶界面改變或者使用腳本直接修改內(nèi)容兩種情況下都會觸發(fā)，有以下幾種情況：

修改了 input:checkbox 或者 input:radio 元素的選擇中狀態(tài)， checked 屬性發(fā)生變化。
修改了 input:text 或者 textarea 元素的值，value 屬性發(fā)生變化。
修改了 select 元素的選中項，selectedIndex 屬性發(fā)生變化。
　　在監(jiān)聽到 onpropertychange 事件后，可以使用 event 的 propertyName 屬性來獲取發(fā)生變化的屬性名稱。

　　集合 oninput & onpropertychange 監(jiān)聽輸入框內(nèi)容變化的示例代碼如下：

// 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，那就是通過右鍵菜單菜單中的剪切和刪除命令刪除內(nèi)容的時候不會觸發(fā)，而 IE 其他版本都是正常的。

關(guān)于input標簽內(nèi)容改變觸發(fā)事件的案例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。