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学习笔记之jQuery的DOM操作
Dec 22 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
js实现分割上传大文件
Mar 09 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php 网上商城促销设计实例代码
2012/02/17 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python如何输出警告信息
2020/07/30 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
文体活动实施方案
2014/03/27 职场文书
双方协议书
2014/04/22 职场文书
经营理念标语
2014/06/21 职场文书
企业员工集体活动方案
2014/08/17 职场文书
手机被没收的检讨书
2014/10/04 职场文书
如何正确理解python装饰器
2021/06/15 Python