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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
JavaScript页面加载事件实例讲解
Sep 01 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python复制文件的方法实例详解
2015/05/22 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
班组拓展活动方案
2014/08/14 职场文书
2014年教育工作总结
2014/11/26 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书