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 相关文章推荐
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
javascript表单验证大全
Aug 12 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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 strtr() 函数使用说明
2008/11/21 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python的re模块应用实例
2014/09/26 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
python如何求100以内的素数
2020/05/27 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
办公室主任职责范文
2013/11/08 职场文书
集体备课反思
2014/02/12 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
年终工作总结范文2014
2014/11/27 职场文书
会计试用期自我评价
2015/03/10 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL