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高级学习笔记整理
Aug 14 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
vue滚动插件better-scroll使用详解
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
PHP新手上路(十三)
2006/10/09 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
python字典操作实例详解
2017/11/16 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python实时监控cpu小工具
2018/06/21 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
简历上的自我评价
2014/02/03 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
社团活动总结范文
2014/04/26 职场文书
事业单位考察材料范文
2014/12/25 职场文书
教师见习总结范文
2015/06/23 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python