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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
一个程序下载的管理程序(一)
2006/10/09 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
php图像验证码生成代码
2017/06/08 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
用js实现in_array的方法
2013/11/05 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python 实现倒排索引的方法
2018/12/25 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
浅谈python出错时traceback的解读
2020/07/15 Python
浅析Python 序列化与反序列化
2020/08/05 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
体育节口号
2014/06/19 职场文书
思想作风建设心得体会
2014/10/22 职场文书
指导教师推荐意见
2015/06/05 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python