本文實例講述了js與jquery實時監聽輸入框值的oninput與onpropertychange方法。分享給大家供大家參考。具體如下：
最近做過一個項目，需求是下拉框里自動匹配關鍵字，具體細節是實時監聽文本框 value 值的變化，然后匹配相關內容。
初接項目，首先想到的是 JQ 里的 change，但是馬上排除此方法，因為 change 是在文本框失去焦點時才會觸發。曲線救國一下，想到用 keydown 來解決。其他一切還好，只是當不通過鍵盤操作，而是通過鼠標來復制粘貼時，這個事件是無法觸發的。所以這個方法也排除掉了。
然后，查詢了一些相關資料，發現只有原生 js 的 oninput & onpropertychange 符合此要求，接着便去 JQ 的 API 里去找符合的方法，很失望，並未找到，但是 bind 確實會綁定類似的事件，那便是 input & propertychange，通過測試，確實是沒問題的。
現在將例子奉上：
JQ：
|
1
2
3
|
$(
'input'
).bind(
'input propertychange'
,
function
() {
//進行相關操作
});
|
其中：propertychange 是為了兼容 IE9 以下版本的。
JS中的 oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，這個事件在用戶界面改變或者使用腳本直接修改內容兩種情況下都會觸發，有以下幾種情況：
修改了 input:checkbox 或者 input:radio 元素的選擇中狀態， checked 屬性發生變化。
修改了 input:text 或者 textarea 元素的值，value 屬性發生變化。
修改了 select 元素的選中項，selectedIndex 屬性發生變化。
JS：
|
1
2
3
4
5
6
7
8
|
if
(isIE)
{
document.getElementById(
"input"
).onpropertychange = keys();
}
else
//需要用addEventListener來注冊事件
{
document.getElementById(
"input"
).addEventListener(
"input"
, keys,
false
);
}
|