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

2021-09-27 23:45:37 字數 1659 閱讀 3326

function onc(data)
onchange事件在內容改變且失去焦點的時候觸發。即,失去焦點了內容未變不觸發,內容變了未失去焦點也不實時觸發。

js直接更改value值時不觸發

function inp(data)
oninput事件在輸入內容改變的時候實時觸發。oninput事件是ie之外的大多數瀏覽器支援的事件,在value改變時實時觸發。

js直接更改value值時不觸發。

onpropertychange事件是實時觸發,每增加或刪除乙個字元就會觸發,通過js改變也會觸發該事件,但是該事件是ie專有。

當input設定為disable=true後,不會觸發。

onpropertychange事件是任何屬性改變都會觸發,而oninput卻只在value改變時觸發,oninput要通過addeventlistener()來註冊,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)
// internet explorer

function onpropchanged (event) 

}

只需要同時繫結 oninput 和 onpropertychange 兩個事件就可以了,示例**如下:

$('textarea').bind('input propertychange', function() );
最後需要注意的是:oninput 和 onpropertychange 這兩個事件在 ie9 中都有個小bug,那就是通過右鍵選單選單中的剪下和刪除命令刪除內容的時候不會觸發,而 ie 其他版本都是正常的。

更多專業前端知識,請上

【猿2048】www.mk2048.com

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

1.onchange事件與onpropertychange事件的區別 onchange事件在內容改變 兩次內容有可能相等 且失去焦點時觸發 onpropertychange事件是實時觸發,每增加或刪除乙個字元就會觸發,通過js改變也會觸發該事件,但是該事件是ie專有。2.oninput事件與onpr...

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

1.onchange事件與onpropertychange事件的區別 onchange事件在內容改變 兩次內容有可能相等 且失去焦點時觸發 onpropertychange事件是實時觸發,每增加或刪除乙個字元就會觸發,通過js改變也會觸發該事件,但是該事件是ie專有。2.oninput事件與onpr...

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

function onc data onchange事件在內容改變且失去焦點的時候觸發。即,失去焦點了內容未變不觸發,內容變了未失去焦點也不實時觸發。js直接更改value值時不觸發 function inp data oninput事件在輸入內容改變的時候實時觸發。oninput事件是ie之外的大...