当用户在文本框中输入完成时,我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数,因为这会导致大量的ajax请求,但我也不希望他们不得不按回车键。

是否有一种方法,让我可以检测当用户已经完成输入,然后做ajax请求?

在这里使用jQuery !


当前回答

嗯,严格来说不是,因为计算机无法猜测用户何时完成输入。当然,你可以在按下键时触发计时器,并在每次按下键时重置它。如果计时器过期,用户在计时器持续时间内还没有输入-你可以称之为“完成输入”。

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

(当然,除非你能从数据中判断他们何时完成)

其他回答

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

当超时结束时,执行ajax请求。

哇,甚至有3条评论都是正确的!

Empty input is not a reason to skip function call, e.g. I remove waste parameter from url before redirect .on ('input', function() { ... }); should be used to trigger keyup, paste and change events definitely .val() or .value must be used You can use $(this) inside event function instead of #id to work with multiple inputs (my decision) I use anonymous function instead of doneTyping in setTimeout to easily access $(this) from n.4, but you need to save it first like var $currentInput = $(this);

编辑我看到有些人不理解没有复制粘贴就绪代码的指示。在这里你

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});

很晚的答案,但我添加它是因为现在是2019年,这完全可以用漂亮的ES6实现,没有第三方库,而且我发现大多数高评分的答案都很笨重,有太多变量。

优雅的解决方案从这篇优秀的博客文章。

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(function () { callback.apply(this, args); }, wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

简单易懂。

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

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

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