js與jquery即時監聽輸入框值的oninput與onpropertychange方法_javascript技巧

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

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

初接項目，首先想到的是 JQ 裡的 change，但是馬上排除此方法，因為 change 是在文字方塊失去焦點時才會觸發。曲線救國一下，想到用 keydown 解決。其他一切還好，只是當不透過鍵盤操作，而是透過滑鼠來複製貼上時，這個事件是無法觸發的。所以這個方法也排除掉了。

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

現在將例子奉上：

JQ：

$('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程式設計有所幫助。