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 相关文章推荐
简明json介绍
Sep 28 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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中Create方法深入探究
2014/06/16 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
简单的js表格操作
2016/09/24 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
Vuex 入门教程
2018/01/10 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
仅利用30行Python代码来展示X算法
2015/04/01 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python实现图片上添加图片
2019/11/26 Python
使用Django清空数据库并重新生成
2020/04/03 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
医学毕业生自荐信
2013/10/11 职场文书
秋季运动会活动方案
2014/02/05 职场文书
音乐教学随笔感言
2014/02/19 职场文书
安全承诺书格式
2014/05/21 职场文书
技能比武方案
2014/05/21 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
司机个人年终总结
2015/03/03 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript