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

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

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

在这里使用jQuery！ 戴夫

Answer 1

所以，我要猜测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 } 

Answer 2

上面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 } 

Answer 3

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

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

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

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

Answer 4

是的，你可以设置一个超时时间为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 }); 

希望这可以帮助，

马尔科

Answer 5

 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/

Answer 6

我喜欢超现实主义的梦想的答案，但我发现我的“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我希望刚刚添加这个作为评论超现实主义的答案，但我是一个新的用户，并没有足够的声誉。 抱歉!

Answer 7

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

 //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 } 

Answer 8

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

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

（当然，除非数据完成，否则可以从数据中得知）

Answer 9

在这种情况下，我不认为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) } } 

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

Answer 10

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

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

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

Answer 11

这是我写的一个简单的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> 

Answer 12

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

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

Answer 13

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

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

Answer 14

如果您正在查找特定的长度（如邮政编码字段）：

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

Answer 15

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

 $('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秒内没有动作）或去到另一个领域（模糊的元素）

Answer 16

解：

我在我的清单上执行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 

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

我相信，这会帮助别人。

阿塔

Answer 17

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

 $(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); } }); }); }); 

Answer 18

同意我的回答。 下面是另一个类似的解决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); }); 

Answer 19

为什么不只是使用onfocusout？

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

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

Answer 20

哇，甚至3条评论都很正确！

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

2. .on ('input', function() { ... }); 应该用来触发keyup ， paste和change事件

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

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

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