您的位置:首页 > Web前端 > JavaScript

JS判断用户连续输入

2016-12-15 09:43 246 查看
方案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()));
});[code]<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.

[b]https://github.com/kenshin54/jquery-koala[/b][/code]
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: