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 页面划词搜索JS
Sep 28 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 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
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
通过C++学习Python
2015/01/20 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Django实现表单验证
2018/09/08 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
QML实现钟表效果
2020/06/02 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
作风建设演讲稿
2014/05/23 职场文书
提拔干部考察材料
2014/05/26 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
经理聘任证明
2015/03/02 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
python使用pymysql模块操作MySQL
2021/06/16 Python