运行javascript函数时，用户完成输入，而不是上键?

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

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

在这里使用jQuery !

当前回答

每个页面有多个计时器

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

要解决这个问题，你只需要向函数传递一个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);

2019-04-26 06:16:45

其他回答

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

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

}

这是我在Stack Overflow上的第一个回复，所以我希望有一天这能帮助到别人:)

2011-10-05 19:44:42

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

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

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

2010-11-18 22:17:47

不确定我的需求是不是有点奇怪，但我需要类似于这个的东西，这就是我最终使用的:

$('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秒内没有动作)或转到另一个字段(模糊出元素)时更新

2012-10-25 16:33:14

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

2015-02-22 01:45:31

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

2022-11-16 04:41:32

运行javascript函数时，用户完成输入，而不是上键?

推荐文章

最新文章

标签