實時監聽input值改變

2021-06-19 18:02:51 字數 1916 閱讀 6893

web開發中經常會碰到需要動態監聽輸入框值變化的情況,如果使用

onkeydown、onkeypress、onkeyup 這個幾個鍵盤事件來監測的話,監聽不了右鍵的複製、剪貼和貼上這些操作,處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案:結合html5標準事件 oninput 和 ie 專屬事件 onpropertychange 事件來監聽輸入框值變化。

精心挑選的優秀jquery ajax分頁外掛程式和教程

推薦幾款非常棒的 jquery 全景展示外掛程式

精心挑選的優秀 jquery 文字特效外掛程式和教程

精心挑選的美輪美奐的 jquery 特效外掛程式

oninput 是html5的標準事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過使用者介面發生的內容變化非常有用,在內容修改後立即被觸發,不像 onchange 事件需要失去焦點才觸發。oninput事件在主流瀏覽器的相容情況如下:

從上面**可以看出,oninput事件在 ie9 以下版本不支援,需要使用 ie 特有的 onpropertychange 事件替代,這個事件在使用者介面改變或者使用指令碼直接修改內容兩種情況下都會觸發,有以下幾種情況:

在監聽到onpropertychange事件後,可以使用 event 的 propertyname 屬性來獲取發生變化的屬性名稱。

集合 oninput & onpropertychange 監聽輸入框內容變化的示例**如下:?

12

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

please modify the contents of the text field.

使用jquery庫的話,只需要同時繫結 oninput 和 onpropertychange 兩個事件就可以了,示例**如下:?

12

3

$('textarea').bind('input propertychange',function() );

下面是jsfiddle

最後需要注意的是:oninputonpropertychange這兩個事件在 ie9 中都有個小bug,那就是通過右鍵選單選單中的剪下和刪除命令刪除內容的時候不會觸發,而 ie 其他版本都是正常的,目前還沒有很好的解決方案。不過 oninput & onpropertychange 仍然是監聽輸入框值變化的最佳方案,如果大家有更好的方法,歡迎參與討論。

監聽input框值的改變

1 onchange觸發事件必須滿足兩個條件 a 當前物件屬性改變,並且是由鍵盤或滑鼠事件激發的 指令碼觸發無效 b 當前物件失去焦點 onblur 2 onpropertychange的話,只要當前物件屬性發生改變,都會觸發事件,但是它是ie專屬的 3 oninput是onpropertychan...

JQ實時監聽input的value值

doctype html html lang en head meta charset utf 8 title document title head body id lia body div class lia content div class label span 姓名 span input ...

Js實時監聽input輸入框值變化

注意事項 onpropertychange ie下,當乙個html元素的屬性改變的時候,都能通過 onpropertychange來即時捕獲。onchange在屬性值改變時還必須使得當前元素失去焦點 onblur 才可以啟用該事件。在用js指令碼改動該元素值時候亦能觸發onpropertychang...