首頁 > web前端 > js教程 > 主體

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

不言
發布: 2018-11-20 15:32:32
轉載
4756 人瀏覽過

這篇文章帶給大家的內容是關於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事件的區別:

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

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

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!