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

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

在这里使用jQuery !


当前回答

我喜欢Surreal Dream的答案,但我发现我的“doneTyping”函数会在每次按键时触发,即如果你快速输入“Hello”;当您停止输入时,该函数将触发5次,而不是只触发一次。

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

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

注意:我本来想把这句话作为对Surreal Dream的回答的评论,但我是一个新用户,没有足够的声誉。对不起!

其他回答

所以,我猜完成打字的意思是你停下来一段时间,比如5秒钟。考虑到这一点,让我们在用户释放一个键时启动一个计时器,并在他们按下一个键时清除它。我决定输入问题将是#myInput。

做一些假设…

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds 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
}

我只是想出了一个简单的代码,等待用户完成输入:

步骤1。将超时设置为空,然后在用户输入时清除当前超时。

步骤2。触发keyup事件之前定义的变量的清除超时。

步骤3.为上面声明的变量定义timeout;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

javascript代码

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

对于alpine.js用户<input @input.debounce.500ms="fn()" >

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

这与“停止输入”不一样,如果你关心用户输入了一堆东西,然后坐在那里,文本框仍然聚焦。

为此,我建议将setTimeout绑定到onclick事件,并假设在x段时间内没有击键,用户已经停止输入。

每个页面有多个计时器

所有其他答案只适用于一个控制(包括我的另一个答案)。 如果每个页面有多个控件(例如在购物车中),只有用户输入内容的最后一个控件才会被调用。在我的情况下,这当然不是希望的行为-每个控件应该有自己的计时器。

要解决这个问题,你只需要向函数传递一个ID,并维护一个timeoutHandles字典,如下所示:

函数声明:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

功能用途:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);