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 学习之旅 (3)
Feb 05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
JavaScript对象属性操作实例解析
Feb 04 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
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python函数参数操作详解
2018/08/03 Python
python 消费 kafka 数据教程
2019/12/21 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
在keras中实现查看其训练loss值
2020/06/16 Python
吸烟检讨书2000字
2014/02/13 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
小学生作文批改评语
2014/12/25 职场文书