用户完成键入而不是在键上运行JavaScriptfunction?

我想在用户input文本框时触发ajax请求。 我不希望它在每次用户键入一个字母时都运行这个函数,因为这会导致大量的ajax请求,但是我不希望他们必须点击回车button。

有没有办法让我可以检测到用户完成键入,然后执行ajax请求?

在这里使用jQuery! 戴夫

所以,我要猜测input完成意味着你只停一会儿,比如5秒。 所以考虑到这一点,当用户释放一个密钥并按下时清除它,让我们启动一个计时器。 我决定input的问题将是#myInput。

做一些假设…

//setup before functions var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms, 5 second for example var $input = $('#myInput'); //on keyup, start the countdown $input.on('keyup', function () { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //on keydown, clear the countdown $input.on('keydown', function () { clearTimeout(typingTimer); }); //user is "finished typing," do something function doneTyping () { //do something } 

上面select的答案不起作用。

由于打字定时器偶尔会被设置多次(在快速打字机等触发按键之前按下键盘两次),则不能正确清除。

下面的解决scheme解决了这个问题,并在完成OP后请求X秒。 它也不再需要多余的keydown函数。 我还添加了一个检查,以便您的函数调用不会发生,如果您的input为空。

 //setup before functions var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms (5 seconds) //on keyup, start the countdown $('#myInput').keyup(function(){ clearTimeout(typingTimer); if ($('#myInput').val()) { typingTimer = setTimeout(doneTyping, doneTypingInterval); } }); //user is "finished typing," do something function doneTyping () { //do something } 

这只是一个underscore.js去抖function的一行

 $('#my-input-box').keyup(_.debounce(doSomething , 500)); 

这基本上说,我停止打字后,有500毫秒的时间。

欲了解更多信息: http : //underscorejs.org/#debounce

是的,你可以设置一个超时时间为2秒,每一个关键事件将触发一个Ajax请求。 您还可以存储XHR方法,并在随后的按键事件中放弃它,以便更节省带宽。 这是我为我的一个自动完成脚本写的东西。

 var timer; var x; $(".some-input").keyup(function () { if (x) { x.abort() } // If there is an existing XHR, abort it. clearTimeout(timer); // Clear the timer so we don't end up with dupes. timer = setTimeout(function() { // assign timer a new timeout x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel) }, 2000); // 2000ms delay, tweak for faster/slower }); 

希望这可以帮助,

马尔科

 var timer; var timeout = 1000; $('#in').keyup(function(){ clearTimeout(timer); if ($('#in').val) { timer = setTimeout(function(){ //do stuff here eg ajax call etc.... var v = $("#in").val(); $("#out").html(v); }, timeout); } }); 

完整的例子在这里: http : //jsfiddle.net/ZYXp4/8/

我喜欢超现实主义的梦想的答案,但我发现我的“doneTyping”function将触发每个按键,即如果你真的很快键入“你好” 当你停止input时,而不是只发射一次,该function会发射5次。

问题是,javascript setTimeout函数似乎不会覆盖或杀死已设置的任何旧的超时,但如果你自己做,它的工作原理! 所以我刚刚在setTimeout之前添加了一个clearTimeout调用,如果设置了typingTimer。 见下文:

 //setup before functions var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms, 5 second for example //on keyup, start the countdown $('#myInput').on("keyup", function(){ if (typingTimer) clearTimeout(typingTimer); // Clear if already set typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //on keydown, clear the countdown $('#myInput').on("keydown", function(){ clearTimeout(typingTimer); }); //user is "finished typing," do something function doneTyping () { //do something } 

NB我希望刚刚添加这个作为评论超现实主义的答案,但我是一个新的用户,并没有足够的声誉。 抱歉!

修改接受的答案以处理其他情况,如粘贴:

 //setup before functions var typingTimer; //timer identifier var doneTypingInterval = 2000; //time in ms, 2 second for example var $input = $('#myInput'); // updated events $input.on('input propertychange paste', function () { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); //user is "finished typing," do something function doneTyping () { //do something } 

那么,严格来说不是,因为计算机无法猜测用户何时input完毕。 你当然可以在键上启动计时器,并在随后的每一个键上复位。 如果定时器到期,用户没有input定时器的时间 – 你可以称之为“完成打字”。

如果您希望用户在input时暂停,则无法知道何时完成。

(当然,除非数据完成,否则可以从数据中得知)

在这种情况下,我不认为keyDown事件是必要的(请告诉我为什么如果我错了)。 在我的(非jQuery)脚本类似的解决scheme看起来像这样:

 var _timer, _timeOut = 2000; function _onKeyUp(e) { clearTimeout(_timer); if (e.keyCode == 13) { // close on ENTER key _onCloseClick(); } else { // send xhr requests _timer = window.setTimeout(function() { _onInputChange(); }, _timeOut) } } 

这是我在堆栈溢出的第一个答复,所以我希望这有助于某人,总有一天:)

您可以使用onblur事件来检测文本框何时失去焦点: https : //developer.mozilla.org/en/DOM/element.onblur

这不像“停止打字”,如果你关心的情况下,用户键入一堆的东西,然后坐在那里仍然集中的文本框的情况。

为此,我build议将setTimeout绑定到onclick事件,并且假设在没有击键的x时间之后,用户已经停止键入。

这是我写的一个简单的JS代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head><title>Submit after typing finished</title> <script language="javascript" type="text/javascript"> function DelayedSubmission() { var date = new Date(); initial_time = date.getTime(); if (typeof setInverval_Variable == 'undefined') { setInverval_Variable = setInterval(DelayedSubmission_Check, 50); } } function DelayedSubmission_Check() { var date = new Date(); check_time = date.getTime(); var limit_ms=check_time-initial_time; if (limit_ms > 800) { //Change value in milliseconds alert("insert your function"); //Insert your function clearInterval(setInverval_Variable); delete setInverval_Variable; } } </script> </head> <body> <input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" /> </body> </html> 

我觉得input事件的解决scheme有点简单:

 var typingTimer; var doneTypingInterval = 500; $("#myInput").on("input", function () { window.clearTimeout(typingTimer); typingTimer = window.setTimeout(doneTyping, doneTypingInterval); }); function doneTyping () { // code here } 

一旦你检测到文本框中的焦点,在按键上做一个超时检查,并在每次触发时重置。

超时完成后,请执行您的ajax请求。

如果您正在查找特定的长度(如邮政编码字段):

 $("input").live("keyup", function( event ){ if(this.value.length == this.getAttribute('maxlength')) { //make ajax request here after. } }); 

不知道我的需求是不是很奇怪,但我需要类似的东西,这就是我最终使用的:

 $('input.update').bind('sync', function() { clearTimeout($(this).data('timer')); $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) { if(x.success != true) { triggerError(x.message); } }, 'json'); }).keyup(function() { clearTimeout($(this).data('timer')); var val = $.trim($(this).val()); if(val) { var $this = $(this); var timer = setTimeout(function() { $this.trigger('sync'); }, 2000); $(this).data('timer', timer); } }).blur(function() { clearTimeout($(this).data('timer')); $(this).trigger('sync'); }); 

这允许我在我的应用程序中有这样的元素:

 <input type="text" data-url="/controller/action/" class="update"> 

当用户“完成打字”(2秒内没有动作)或去到另一个领域(模糊的元素)

解:

我在我的清单上执行search,需要它是基于Ajax的。 这意味着每个关键更改search结果应该更新和显示。 这个工作的结果是发送给服务器的这么多的ajax调用,这不是一件好事。 一些工作后,我做了一个方法来ping客户端停止键入时的服务器。

解决scheme为我工作是:

 $(document).ready(function() { $('#yourtextfield').keyup(function() { s = $('#yourtextfield').val(); setTimeout(function() { if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing. $.ajax({ type: "POST", url: "yoururl", data: 'search=' + s, cache: false, beforeSend: function() { // loading image }, success: function(data) { // Your response will come here } }) } }, 1000); // 1 sec delay to check. }); // End of keyup function }); // End of document.ready 

你已经注意到在实现这个时不需要使用任何定时器。

我相信,这会帮助别人。

阿塔

如果您需要等到用户完成打字使用简单这个:

 $(document).on('change','#PageSize', function () { //Do something after new value in #PageSize }); 

ajax调用完整的例子 – 这对我的寻呼机工作 – 每个列表的项目数:

 $(document).ready(function () { $(document).on('change','#PageSize', function (e) { e.preventDefault(); var page = 1; var pagesize = $("#PageSize").val(); var q = $("#q").val(); $.ajax({ url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })', data: { q: q, pagesize: pagesize, page: page }, type: 'post', datatype: "json", success: function (data) { $('#tablecontainer').html(data); // toastr.success('Pager has been changed', "Success!"); }, error: function (jqXHR, exception) { ShowErrorMessage(jqXHR, exception); } }); }); }); 

同意我的回答。 下面是另一个类似的解决scheme。 唯一的区别是我使用.on(“input”…)而不是keyup。 这只能捕捉input中的变化。 其他键如Ctrl,Shift等被忽略

 var typingTimer; //timer identifier var doneTypingInterval = 5000; //time in ms (5 seconds) //on input change, start the countdown $('#myInput').on("input", function() { clearTimeout(typingTimer); typingTimer = setTimeout(function(){ // doSomething... }, doneTypingInterval); }); 

为什么不只是使用onfocusout?

https://www.w3schools.com/jsreF/event_onfocusout.asp

如果它是一个表单,他们将始终离开每个input字段的焦点,以点击提交button,所以你知道没有input将错过获取其onfocusout事件处理程序调用。

哇,甚至3条评论都很正确!

  1. 空input不是跳过函数调用的原因,例如我在redirect之前从url中删除了浪费参数

  2. .on ('input', function() { ... }); 应该用来触发keyuppastechange事件

  3. 绝对.val().value必须使用

  4. 您可以使用$(this)里面的事件函数而不是#id来处理多个input

  5. (我的决定)我使用匿名函数而不是setTimeoutdoneTyping来轻松地从doneTyping中访问$(this) ,但是你需要先保存它,比如var $currentInput = $(this);