js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法
本文實(shí)例講述了js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法。分享給大家供大家參考。具體如下：
最近做過一個(gè)項(xiàng)目，需求是下拉框里自動(dòng)匹配關(guān)鍵字，具體細(xì)節(jié)是實(shí)時(shí)監(jiān)聽文本框 value 值的變化，然后匹配相關(guān)內(nèi)容。
初接項(xiàng)目，首先想到的是 JQ 里的 change，但是馬上排除此方法，因?yàn)?change 是在文本框失去焦點(diǎn)時(shí)才會(huì)觸發(fā)。曲線救國(guó)一下，想到用 keydown 來解決。其他一切還好，只是當(dāng)不通過鍵盤操作，而是通過鼠標(biāo)來復(fù)制粘貼時(shí)，這個(gè)事件是無法觸發(fā)的。所以這個(gè)方法也排除掉了。
然后，查詢了一些相關(guān)資料，發(fā)現(xiàn)只有原生 js 的 oninput & onpropertychange 符合此要求，接著便去 JQ 的 API 里去找符合的方法，很失望，并未找到，但是 bind 確實(shí)會(huì)綁定類似的事件，那便是 input & propertychange，通過測(cè)試，確實(shí)是沒問題的。
現(xiàn)在將例子奉上：
JQ：
$('input').bind('input propertychange', function() {
//進(jìn)行相關(guān)操作
});
其中：propertychange 是為了兼容 IE9 以下版本的。
JS中的 oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，這個(gè)事件在用戶界面改變或者使用腳本直接修改內(nèi)容兩種情況下都會(huì)觸發(fā)，有以下幾種情況：
修改了 input:checkbox 或者 input:radio 元素的選擇中狀態(tài)， checked 屬性發(fā)生變化。
修改了 input:text 或者 textarea 元素的值，value 屬性發(fā)生變化。
修改了 select 元素的選中項(xiàng)，selectedIndex 屬性發(fā)生變化。
JS：
if(isIE)
{
document.getElementById("input").onpropertychange = keys();
}
else //需要用addEventListener來注冊(cè)事件
{
document.getElementById("input").addEventListener("input", keys, false);
}
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js監(jiān)聽輸入框值的即時(shí)變化onpropertychange、oninput
- js change,propertychange,input事件小議
- javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
- js propertychange和oninput事件
- 解決angularJS中input標(biāo)簽的ng-change事件無效問題
- js之input[type=file]選擇重復(fù)的文件,無法觸發(fā)change事件問題
- JS中的oninput和onchange事件的區(qū)別及如何正確使用
- js實(shí)現(xiàn)使用輸入input和改變change事件模擬手動(dòng)輸入
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JS函數(shù)進(jìn)階之prototy用法實(shí)例分析
這篇文章主要介紹了JS函數(shù)進(jìn)階之prototy用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)中使用prototy擴(kuò)展屬性相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
在Javascript中我們通常判斷一個(gè)變量是否存在,即不為null或者undefined,這篇文章主要給大家介紹了關(guān)于JavaScript中判斷變量是否存在的四種常用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)刷臉登錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
JavaScript基于對(duì)象去除數(shù)組重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript基于對(duì)象去除數(shù)組重復(fù)項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組去重的操作步驟與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了原生js仿jquery animate動(dòng)畫效果，具有一定的，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了javascript按鈕禁用和啟用的效果實(shí)例代碼,需要的朋友可以參考下2017-10-10
JS實(shí)現(xiàn)網(wǎng)頁(yè)端猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)端猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Javascript中實(shí)現(xiàn)trim()函數(shù)的兩種方法
這篇文章主要介紹了Javascript中實(shí)現(xiàn)trim()函數(shù)的兩種方法,本文直接給出實(shí)現(xiàn)代碼和使用方法,需要的朋友可以參考下2015-02-02
JS+WCF實(shí)現(xiàn)進(jìn)度條實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)加載量的方法詳解
這篇文章主要介紹了JS+WCF實(shí)現(xiàn)進(jìn)度條實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)加載量的方法,結(jié)合實(shí)例形式分析了大量數(shù)據(jù)導(dǎo)入過程中前臺(tái)js與后臺(tái)WCF交互實(shí)現(xiàn)實(shí)時(shí)顯示加載進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12