監聽input textarea輸入框值變化的知識

在document的input輸入框、textarea輸入框(不管是現在的元素還是將來要新增的元素)上面繫結input propertychange事件。

實時監聽輸入框值變化的完美方案：

oninput & onpropertychange

在 web

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

onkeydown、onkeypress、onkeyup 這個幾個鍵盤事件來監測的話，監聽不了右鍵的複製、剪貼和貼上這些操作，處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案：結合

html5

標準事件 oninput 和 ie 專屬事件 onpropertychange 事件來監聽輸入框值變化。

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

oninput

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

在監聽到

onpropertychange

事件後，可以使用 event 的 propertyname 屬性來獲取發生變化的屬性名稱。

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

please modify the contents of the text field.

oninput="oninput (event)"onpropertychange="onpropchanged (event)"value="text field"/>

使用 jquery

庫的話，只需要同時繫結 on

input 和 onpropertychange 兩個事件就可以了，

示例**如下：

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

最後需要注意的是：

oninput

和onpropertychange

這兩個事件在 ie9 中都有個小bug，那就是通過右鍵選單選單中的剪下和

刪除命令刪除內容的時候不會觸發，而 ie 其他版本都是正常的，目前還沒有很好的解決方案。不過 oninput & onpropertychange 仍然是監聽輸入框值變化的最佳方案，如果大家有更好的方法，歡迎參與討論。

使用jquery的**如下：

$(document).on('focus', 'input', function() );

$(document).on('blur', 'input', function() );

$(document).on('input propertychange', 'input', function() );

$(document).on('input propertychange', 'textarea', function() );

上面是知識介紹，後面有很好的例子再新增上來吧。