jQuery 监控键盘一段时间没输入
监控一段时间没输入可用于简单的输入完成
上次实现了一个模拟输入完成则发送请求到后台获取数据的并显示到前台的问题,其中核心的判断标准是输入完成的定义。
即:用户怎么算输入完成。
我使用的标准是,当一个文本框中,里面的内容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。
相关推荐
-
jquery 按键盘上的enter事件
接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过.使用的开发工具是微软VS2010+Jquery框架 实现步骤如下 1.首先引用Jquery类库 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 2.Javascript代码 复制代
-
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
最近做项目,我负责做网页前端,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文.思考了一下,决定用JS实现虚拟键盘. 首先上网搜索了一下JS虚拟键盘,在经过仔细筛选后,相中了VirtualKeyboard,一款功能强大的JS虚拟键盘插件. 先简单介绍一下VirtualKeyboard,它内置了100多种键盘布局和200多种输入法,9套可选皮肤方案,而且支持自建输入法,功能相当强大. 先附上下载地址,目前的最新版本3.94:http://www.coralloso
-
基于Jquery实现键盘按键监听
从NETTUTS看到的文章,效果很不错,有点类似于Flash做出来的效果,demo在这里 ,原文 对实现步骤讲得很清楚,我就不多提了,实现效果的逻辑比较简单,也就是slideDown()方法, jquery slideDown()方法,实现滑动效果. 复制代码 代码如下: // shows a given element and hides all others function showViaKeypress(element_id) { $(".container").
-
jQuery实现监控页面所有ajax请求的方法
本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en&quo
-
jQuery scroll事件实现监控滚动条分页示例
scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了 $(window).scroll(function () { //$(window).scrollTop()这个方法是当前滚动条滚动的距离 //$(window).height()获取当前窗体的高度 //$(docume
-
jquery监控数据是否变化(修正版)
复制代码 代码如下: ///<reference path="query-1.5.1.min.js" /> (function($) { /*监控页面数据是否发生变化*/ var pageDataChange = false; var tagName = "Input, Select, Textarea"; var ctrlIds = []; $.fn.MonitorDataChange = function(options) { var deafult
-
基于jquery的监控数据是否发生改变
这样之前的功夫又白费了.解决这些问题的办法就是:监控页面数据是否发生变化.如果发生变化,提示用户保存.如果数据未发生变化.当我们点击保存时,也不需要提交到数据库. 接下来看看解决办法: 复制代码 代码如下: ///<reference path="jquery-1.3.2-vsdoc2.js" /> (function($) { var pageDataChange = false //默认标识页面数据未发生改变 /*监控页面数据是否发生变化*/ $.fn.MonitorD
-
jQuery监控文本框事件并作相应处理的方法
本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document) .on('input propertychange', '#query', function(){ var input = $(this).val(); show(input); }); var show = function(txt){ var info = '监听:<b>' + txt + '</b><br /><br />
-
jquery.autocomplete修改实现键盘上下键自动填充示例
根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能. 在网上找了很久没有找到可以实现该功能的插件,无奈只能自己动手改代码. 找到js中的KEY.DOWN 和 KEY.UP执行代码 如下: 复制代码 代码如下: case KEY.DOWN: event.preventDefault(); if ( select.visible() ) { select.next(); } else { onChange(0, true); } break; 在select.
-
jquery.hotkeys监听键盘按下事件keydown插件
jquery.hotkeys文件下载: http://xiazai.jb51.net/201405/yuanma/jquery_hotkeys(jb51.net).rar 参照了一下它的文档用法,我们可以这样使用: 复制代码 代码如下: <script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script src="jquery.hotke
随机推荐
- Oracle存储过程、包、方法使用总结(推荐)
- 浅谈Java中的hashcode方法(推荐)
- iOS中设置view圆角化的四种方法示例
- Asp.net中获取DataTable选择第一行某一列值
- 使用图灵api创建微信聊天机器人
- 用PHP代替JS玩转DOM的思路及示例代码
- Mysql修改datadir导致无法启动问题解决方法
- Mac OS X 系统下安装和部署Egret引擎开发环境
- 利用node.js爬取指定排名网站的JS引用库详解
- Python函数式编程指南(一):函数式编程概述
- 分享bootstrap学习笔记心得(组件及其属性)
- jQuery的cookie插件实现保存用户登陆信息
- javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
- Node.js 事件循环详解及实例
- 微信小程序实现缓存根据不同的id来进行设置和读取缓存
- 用户IIS APPPOOL\DefaultAppPool登录失败的解决方法
- php集成动态口令认证
- php递归删除指定文件夹的方法小结
- Android实现微信首页左右滑动切换效果
- CommonMark 使用教程:将 Markdown 语法转成 Html