jQuery 监控键盘一段时间没输入


Posted in Javascript onApril 22, 2016

监控一段时间没输入可用于简单的输入完成

上次实现了一个模拟输入完成则发送请求到后台获取数据的并显示到前台的问题,其中核心的判断标准是输入完成的定义。

即:用户怎么算输入完成。

我使用的标准是,当一个文本框中,里面的内容1秒钟无变化,则表示用户1秒钟内无输入,说明用户是已经输入完成,再等待返回数据了。那么jQuery如何实现判断1秒内无输入呢。

<!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秒内没再输入,可以发送查询");
}
}, 1000);
});
})
</script>
</head>
<body>
<input id="text1" type="text" value="" />
</body>
</html>

原理

就是这样一段精简的代码。其原理可简述如下:

用户每一次按下键盘,都记录当前的时间,然后再1秒后再判断一下时间。

lastTime由于是全局变量,所以当用户在输入的时候,lastTime是一直在变化的,所以一秒后再用lastTime-e.timeStamp,只有最后按下的e.timeStamp那一次才会为0。

Javascript 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
react-native封装插件swiper的使用方法
Mar 20 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
基于jquery实现轮播特效
Apr 22 #Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
JS简单循环遍历json数组的方法
Apr 22 #Javascript
JavaScript中数组去除重复的三种方法
Apr 22 #Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 #Javascript
You might like
一些PHP写的小东西
2006/12/06 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
JavaScript简介
2015/02/15 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery动态添加
2016/04/07 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python使用django搭建web开发环境
2017/06/09 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Django使用rest_framework写出API
2020/05/21 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python链表类中获取元素实例方法
2021/02/23 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
公司会议开幕词
2015/01/29 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
redis实现排行榜功能
2021/05/24 Redis