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 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
React学习之事件绑定的几种方法对比
Sep 24 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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 数组二分法查找函数代码
2010/02/16 PHP
php继承的一个应用
2011/09/06 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
js简单时间比较的方法
2016/08/02 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
数据库的约束含义
2012/09/09 面试题
护理学毕业生自荐信
2013/10/02 职场文书
实习单位推荐信范文
2013/11/27 职场文书
设计大赛策划方案
2014/06/13 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python