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作用域容易记错的两个地方分析
Jun 22 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
微信小程序 form组件详解
Oct 25 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
基于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/10/09 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
python编写爬虫小程序
2015/05/14 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python让列表倒序输出的实例
2018/06/25 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
Weblogic的布署方式
2013/08/23 面试题
Ruby如何定义一个类
2012/10/08 面试题
高二美术教学反思
2014/01/14 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
师范学院教师自荐书
2014/01/31 职场文书
对标管理实施方案
2014/03/12 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
历史博物馆观后感
2015/06/05 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书