js與jquery實時監聽輸入框值的oninput與onpropertychange方法

本文實例講述了js與jquery實時監聽輸入框值的oninput與onpropertychange方法。分享給你們供你們參考。具體以下：

最近作過一個項目，需求是下拉框裏自動匹配關鍵字，具體細節是實時監聽文本框 value 值的變化，而後匹配相關內容。

初接項目，首先想到的是 JQ 裏的 change，可是立刻排除此方法，由於 change 是在文本框失去焦點時纔會觸發。曲線救國一下，想到用 keydown 來解決。其餘一切還好，只是當不經過鍵盤操做，而是經過鼠標來複制粘貼時，這個事件是沒法觸發的。因此這個方法也排除掉了。

而後，查詢了一些相關資料，發現只有原生 js 的 oninput & onpropertychange 符合此要求，接着便去 JQ 的 API 裏去找符合的方法，很失望，並未找到，可是 bind 確實會綁定相似的事件，那即是 input & propertychange，經過測試，確實是沒問題的。

如今將例子奉上：

$('input').bind('input propertychange', function() { 
 //進行相關操做 
});

其中：propertychange 是爲了兼容 IE9 如下版本的。

JS中的 oninput 事件在 IE9 如下版本不支持，須要使用 IE 特有的 onpropertychange 事件替代，這個事件在用戶界面改變或者使用腳本直接修改內容兩種狀況下都會觸發，有如下幾種狀況：

修改了 input:checkbox 或者 input:radio 元素的選擇中狀態， checked 屬性發生變化。

修改了 input:text 或者 textarea 元素的值，value 屬性發生變化。
修改了 select 元素的選中項，selectedIndex 屬性發生變化。
JS：

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //須要用addEventListener來註冊事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

但願本文所述對你們的javascript程序設計有所幫助。