JS判断用户连续输入
方案1
//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
// @callback: function to be called when even triggers
// @timeout: (default=1000) timeout, in ms, to to wait before triggering event if not
// caused by blur.
// Requires jQuery 1.7+
//
;(function($){
$.fn.extend({
donetyping: function(callback,timeout){
timeout = timeout || 1e3; // 1 second default timeout
var timeoutReference,
doneTyping = function(el){
if (!timeoutReference) return;
timeoutReference = null;
callback.call(el);
};
return this.each(function(i,el){
var $el = $(el);
// Chrome Fix (Use keyup over keypress to detect backspace)
// thank you @palerdot
$el.is(':input') && $el.on('keyup keypress',function(e){
// This catches the backspace button in chrome, but also prevents
// the event from triggering too premptively. Without this line,
// using tab/shift+tab will make the focused element fire the callback.
if (e.type=='keyup' && e.keyCode!=8) return; // Check if timeout has been set. If it has, "reset" the clock and
// start over again.
if (timeoutReference) clearTimeout(timeoutReference);
timeoutReference = setTimeout(function(){
// if we made it here, our timeout has elapsed. Fire the
// callback
doneTyping(el);
}, timeout);
}).on('blur',function(){
// If we can, fire the event since we're leaving the field
doneTyping(el);
});
});
}
});
})(jQuery); $('#example').donetyping(function(){
$('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="example" />
<p id="example-output">Nothing yet</p>
方案2.
https://github.com/kenshin54/jquery-koala
Load jQuery and koala:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.koala.js" type="text/javascript"></script>
Bind keyboard events to the dom with Koala.
<script type="text/javascript">
jQuery(document).ready(function() {
$('.koala').koala({
delay: 200,
keyup: function(event){
// do anything you want
// ex. ajax
}
});
});
</script>
Koala support descendant elements that are added to the document at a later time.
<script type="text/javascript">
jQuery(document).ready(function() {
$("#future").koala('.koala', {
delay: 300,
keyup: function(event){
// do anything you want
// ex. ajax
}
});
});
</script>
JS判断用户连续输入的更多相关文章
- c语言判断用户是否输入-非阻塞函数kbhit
一.基础研究 要从地址读取数据,肯定是要定义一个指针变量p,用它来实现变换地址和取值的功能.另外程序是当两个条件中的某一个出现时才停止,所以应该用while~do循环语句循环输出n和d,并用while ...
- js判断用户是客户端还是移动端
js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种 1.第一种: function IsPC() { ...
- js判断用户是否正在滚动滚动条,滚动条滚动是否停止
js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
- js判断用户的浏览器设备是移动端还是pc端
最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...
- [开发笔记]-js判断用户的浏览设备是移动设备还是PC
最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...
- js判断用户是在PC端或移动端访问
js如何判断用户是在PC端和还是移动端访问. 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...
- js判断用户是否离开当前页面
简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...
- js判断用户关闭页面或浏览器
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- JS判断用户是否在线的方法
在以前坐项目的时候,经常碰见通过sessionLisnter来判断用户是否在线的方法,但是由于用户关闭浏览器时不会立刻是否session,因此大部分时候都考虑在页面中通过JS来监控页面是否关闭. 网络 ...
随机推荐
- Delphi数组复制(只能使用System单元的Move函数)
const AA : arrary[..] ,,,,) var BB : arrary[..] of byte; begin BB := AA ; {这样是错误的} Move(AA,BB,sizeof ...
- 使用ffmpeg 对视频截图,和视频转换格式
//执行CMD命令方法 public static void CmdProcess(string command)//调用CMD { //实例化一个进程类 ...
- 高逼格UI-ASD(Android Support Design)
绪 今年的Google IO给我们android开发着带来了三样非常屌非常屌的library: ASD(Android Support Design) APL(Android Percent Layo ...
- OC对象创建过程
在利用OC开发应用程序中,须要大量创建对象,那么它的过程是什么呢? 比方:NSArray *array = [[NSArrayalloc] init]; 在说明之前,先把OC的Class描写叙述一下: ...
- java中clone的深入理解
Java中Clone的概念大家应该都很熟悉了,它可以让我们很方便的“制造”出一个对象的副本来,下面来具体看看java中的Clone机制是如何工作的? 1. Clone和Copy 假 ...
- opencv 训练自己的分类器汇总
原地址:http://www.cnblogs.com/zengqs/archive/2009/02/12/1389208.html OpenCV训练分类器 OpenCV训练分类器 一.简介 目标检测方 ...
- SmartDraw2008破解过程总结
SmartDraw2008破解过程总结作者:chszs 原创转载请保留作者名. 按下列步骤完毕,保证能够支持中文. 一.所需软件:1)SmartDraw2008安装软件:2)SmartDraw200 ...
- 跨平台网络通信与server编程框架库(acl库)介绍
一.描写叙述 acl project是一个跨平台(支持LINUX,WIN32,Solaris,MacOS,FreeBSD)的网络通信库及server编程框架,同一时候提供很多其它的有用功能库.通过该库 ...
- poj 1659 Frogs' Neighborhood (度序列)
Frogs' Neighborhood Time Limit: 5000MS Memory Limit: 10000K Total Submissions: 7295 Accepted: 31 ...
- INSTALL_FAILED_MEDIA_UNAVAILABLE错误处理
问题描写叙述: 在android手机上安装apk的时候,报错例如以下: Installation error: INSTALL_FAILED_MEDIA_UNAVAILABLE Please chec ...