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获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
基于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解析xml 的四种简单方法(附实例)
2016/07/11 PHP
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
团员个人的自我评价
2013/12/02 职场文书
信息技术教学反思
2014/02/12 职场文书
建设工程授权委托书
2014/09/22 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python