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点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
简单实现js页面切换功能
Jan 10 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Pytorch释放显存占用方式
2020/01/13 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
普通党员对照检查材料
2014/08/28 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
大学副班长竞选稿
2015/11/21 职场文书
Mysql基础之常见函数
2021/04/22 MySQL