jQuery 監(jiān)控鍵盤一段時間沒輸入

更新時間：2016年04月22日 14:13:27 作者：逆心

當一個文本框中，里面的內(nèi)容1秒鐘無變化，則表示用戶1秒鐘內(nèi)無輸入，說明用戶是已經(jīng)輸入完成，再等待返回數(shù)據(jù)了。那么jQuery如何實現(xiàn)判斷1秒內(nèi)無輸入呢，一起通過本文學習吧

監(jiān)控一段時間沒輸入可用于簡單的輸入完成

上次實現(xiàn)了一個模擬輸入完成則發(fā)送請求到后臺獲取數(shù)據(jù)的并顯示到前臺的問題，其中核心的判斷標準是輸入完成的定義。

即：用戶怎么算輸入完成。

我使用的標準是，當一個文本框中，里面的內(nèi)容1秒鐘無變化，則表示用戶1秒鐘內(nèi)無輸入，說明用戶是已經(jīng)輸入完成，再等待返回數(shù)據(jù)了。那么jQuery如何實現(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>

原理

就是這樣一段精簡的代碼。其原理可簡述如下：

用戶每一次按下鍵盤，都記錄當前的時間，然后再1秒后再判斷一下時間。

lastTime由于是全局變量，所以當用戶在輸入的時候，lastTime是一直在變化的，所以一秒后再用lastTime-e.timeStamp，只有最后按下的e.timeStamp那一次才會為0。

您可能感興趣的文章:

相關(guān)文章

Jquery 動態(tài)生成表格示例代碼
在某些特殊的情況下是需要動態(tài)生成表格的，下面為大家詳細介紹下使用jquery是如何做到的，感興趣的朋友不要錯過
2013-12-12
jQuery simpleModal插件的使用介紹
SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯，具有參考借鑒價值，對jquery simplemodal相關(guān)知識感興趣的朋友一起學習吧
2016-08-08
jQuery如何防止Ajax重復提交
重復提交給網(wǎng)站服務端帶來很大的壓力，下面小編給大家分享一段代碼關(guān)于jQuery如何防止Ajax重復提交，感興趣的朋友一起看看吧
2016-10-10
jQuery在html有效在jsp無效的原因及解決方法
最近用jQuery來寫下拉框的選項值的左右移動，放到jsp里面就不能用了，經(jīng)過測試終于找到了解決方法在此與大家分享下
2013-08-08
jquery實現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jquery實現(xiàn)簡單的瀑布流布局
瀑布流布局有兩種，一種是固定列，一種是非固定列。本文主要記述第一種的實現(xiàn)。需要的朋友可以參考借鑒
2016-12-12
jQuery實現(xiàn)標簽子元素的添加和賦值方法
下面小編就為大家分享一篇jQuery實現(xiàn)標簽子元素的添加和賦值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
AeroWindow 基于JQuery的彈出窗口插件
AeroWindow是個Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動。
2011-06-06
jQuery實現(xiàn)仿京東防抖動菜單效果示例
這篇文章主要介紹了jQuery實現(xiàn)仿京東防抖動菜單效果,結(jié)合實例形式分析了jQuery事件響應及頁面屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-07-07
jQuery實現(xiàn)鼠標跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
這篇文章主要介紹了jQuery實現(xiàn)鼠標跟隨提示層效果代碼,具備顯示文本,Div,Table,Html等功能.涉及jQuery針對鼠標事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下
2016-04-04