jQuery 監(jiān)控鍵盤一段時(shí)間沒輸入
更新時(shí)間：2016年04月22日 14:13:27 作者：逆心
當(dāng)一個(gè)文本框中，里面的內(nèi)容1秒鐘無變化，則表示用戶1秒鐘內(nèi)無輸入，說明用戶是已經(jīng)輸入完成，再等待返回?cái)?shù)據(jù)了。那么jQuery如何實(shí)現(xiàn)判斷1秒內(nèi)無輸入呢，一起通過本文學(xué)習(xí)吧
監(jiān)控一段時(shí)間沒輸入可用于簡單的輸入完成
上次實(shí)現(xiàn)了一個(gè)模擬輸入完成則發(fā)送請求到后臺獲取數(shù)據(jù)的并顯示到前臺的問題，其中核心的判斷標(biāo)準(zhǔn)是輸入完成的定義。
即：用戶怎么算輸入完成。
我使用的標(biāo)準(zhǔn)是，當(dāng)一個(gè)文本框中，里面的內(nèi)容1秒鐘無變化，則表示用戶1秒鐘內(nèi)無輸入，說明用戶是已經(jīng)輸入完成，再等待返回?cái)?shù)據(jù)了。那么jQuery如何實(shí)現(xiàn)判斷1秒內(nèi)無輸入呢。
<!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>
原理
就是這樣一段精簡的代碼。其原理可簡述如下：
用戶每一次按下鍵盤，都記錄當(dāng)前的時(shí)間，然后再1秒后再判斷一下時(shí)間。
lastTime由于是全局變量，所以當(dāng)用戶在輸入的時(shí)候，lastTime是一直在變化的，所以一秒后再用lastTime-e.timeStamp，只有最后按下的e.timeStamp那一次才會為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)條分頁示例
- 基于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)控頁面所有ajax請求的方法
相關(guān)文章
在某些特殊的情況下是需要?jiǎng)討B(tài)生成表格的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯(cuò)過2013-12-12
SimpleModal是一個(gè)輕量級的jQuery插件，它提供了一個(gè)模式對話框發(fā)展強(qiáng)大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯(cuò)，具有參考借鑒價(jià)值，對jquery simplemodal相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-08-08
重復(fù)提交給網(wǎng)站服務(wù)端帶來很大的壓力，下面小編給大家分享一段代碼關(guān)于jQuery如何防止Ajax重復(fù)提交，感興趣的朋友一起看看吧2016-10-10
最近用jQuery來寫下拉框的選項(xiàng)值的左右移動(dòng)，放到j(luò)sp里面就不能用了，經(jīng)過測試終于找到了解決方法在此與大家分享下2013-08-08
jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
瀑布流布局有兩種，一種是固定列，一種是非固定列。本文主要記述第一種的實(shí)現(xiàn)。需要的朋友可以參考借鑒2016-12-12
jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法
下面小編就為大家分享一篇jQuery實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
AeroWindow是個(gè)Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動(dòng)。2011-06-06
jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁面屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼,具備顯示文本,Div,Table,Html等功能.涉及jQuery針對鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04