jQuery 監(jiān)控鍵盤一段時(shí)間沒輸入
監(jiān)控一段時(shí)間沒輸入可用于簡(jiǎn)單的輸入完成
上次實(shí)現(xiàn)了一個(gè)模擬輸入完成則發(fā)送請(qǐng)求到后臺(tái)獲取數(shù)據(jù)的并顯示到前臺(tái)的問題,其中核心的判斷標(biāo)準(zhǔn)是輸入完成的定義。
即:用戶怎么算輸入完成。
我使用的標(biāo)準(zhǔn)是,當(dāng)一個(gè)文本框中,里面的內(nèi)容1秒鐘無(wú)變化,則表示用戶1秒鐘內(nèi)無(wú)輸入,說明用戶是已經(jīng)輸入完成,再等待返回?cái)?shù)據(jù)了。那么jQuery如何實(shí)現(xiàn)判斷1秒內(nèi)無(wú)輸入呢。
<!DOCTYPE html> <html> <head> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> <script> var lastTime; $(function(){ $('#text1').keyup(function (e) { lastTime = e.timeStamp; setTimeout(function () { if (lastTime - e.timeStamp == 0) { alert("1秒內(nèi)沒再輸入,可以發(fā)送查詢"); } }, 1000); }); }) </script> </head> <body> <input id="text1" type="text" value="" /> </body> </html>
原理
就是這樣一段精簡(jiǎn)的代碼。其原理可簡(jiǎn)述如下:
用戶每一次按下鍵盤,都記錄當(dāng)前的時(shí)間,然后再1秒后再判斷一下時(shí)間。
lastTime由于是全局變量,所以當(dāng)用戶在輸入的時(shí)候,lastTime是一直在變化的,所以一秒后再用lastTime-e.timeStamp,只有最后按下的e.timeStamp那一次才會(huì)為0。
- 基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變
- jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版)
- jquery.autocomplete修改實(shí)現(xiàn)鍵盤上下鍵自動(dòng)填充示例
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- 基于Jquery實(shí)現(xiàn)鍵盤按鍵監(jiān)聽
- jquery.hotkeys監(jiān)聽鍵盤按下事件keydown插件
- jquery 按鍵盤上的enter事件
- 打造個(gè)性化的功能強(qiáng)大的Jquery虛擬鍵盤(VirtualKeyboard)
- jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
- jQuery實(shí)現(xiàn)監(jiān)控頁(yè)面所有ajax請(qǐng)求的方法
相關(guān)文章
Easyui ueditor 整合解決不能編輯的問題(推薦)
這篇文章主要介紹了Easyui ueditor 整合解決不能編輯的問題 ,需要的朋友可以參考下2017-06-06jQuery實(shí)現(xiàn)簡(jiǎn)單的列表式導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的列表式導(dǎo)航菜單效果代碼,涉及jquery操作鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08NiftyCube——輕松實(shí)現(xiàn)圓角邊框
這篇文章主要介紹了NiftyCube——輕松實(shí)現(xiàn)圓角邊框2007-02-02解析jquery easyui tree異步加載子節(jié)點(diǎn)問題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點(diǎn)問題,easyui中的樹可以從標(biāo)記中建立,也可以通過指定一個(gè)URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。2017-03-03基于jquery的下拉框改變動(dòng)態(tài)添加和刪除表格實(shí)現(xiàn)代碼
以前很少用jquery,現(xiàn)在工作需要,用上了,感覺真的很方便!不用再像以前那樣寫那么多多余的Js了!看來(lái)得在jquery上花點(diǎn)功夫呢!2011-03-03jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法,詳細(xì)介紹了前臺(tái)及后臺(tái)的處理方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-10-10