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ā)。曲線救國一下,想到用 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)文章
JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹
這篇文章主要介紹了JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹,本文著重講解了什么是立即調(diào)用函數(shù)表達(dá)式,需要的朋友可以參考下2015-03-03Js表格萬條數(shù)據(jù)瞬間加載實(shí)現(xiàn)代碼
一條數(shù)據(jù)創(chuàng)建一行,如果數(shù)量大的時(shí)候,一次性要加載完數(shù)據(jù)的話,瀏覽器就會(huì)卡上半天,下面有個(gè)不錯(cuò)的方法,大家可以參考下2014-02-02JavaScript剩余操作符Rest Operator詳解
在本篇文章里小編給各位分享的是關(guān)于JavaScript剩余操作符Rest Operator知識(shí)點(diǎn)用法總結(jié),有需要的朋友們跟著學(xué)習(xí)下。2019-07-07window.open不被攔截的簡單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄獁indow.open不被攔截的簡單實(shí)現(xiàn)代碼(推薦) 。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JS使用Chrome瀏覽器實(shí)現(xiàn)調(diào)試線上代碼
這篇文章主要介紹了JS使用Chrome瀏覽器實(shí)現(xiàn)調(diào)試線上代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼
這篇文章主要介紹了JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼,有需要的朋友可以參考一下2014-01-01javaScript 讀取和設(shè)置文檔元素的樣式屬性
有時(shí)候我們需要用js設(shè)置文檔的樣式屬性,下面就是一些方法與原理分析,大家可以看下,應(yīng)該就沒問題了。2009-04-04