用户完成键入而不是按键盘键时运行javascript函数?

JavaScript

2020-03-13

我想在用户完成在文本框中的输入后触发ajax请求。我不希望它在用户每次输入字母时都运行该函数,因为这将导致大量的ajax请求,但是我也不希望他们也必须按下Enter键。

有没有一种方法可以让我检测用户何时完成键入,然后执行ajax请求?

在这里使用jQuery!戴夫

第1515篇《用户完成键入而不是按键盘键时运行javascript函数?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
null 2020.03.13

一旦检测到对文本框的关注,请在按键上进行超时检查,并在每次触发时将其重置。

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

小宇宙路易 2020.03.13

为什么不只使用onfocusout?

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

如果是表单,他们将始终留下每个输入字段的焦点,以便单击“提交”按钮,因此您知道没有任何输入会错过调用其onfocusout事件处理程序的机会。

樱小小小小 2020.03.13

如果用户有必要离开该领域,可以在Javascript中使用“ onBlur”代替Onchange

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

如果没有必要,设置计时器将是一个不错的选择。

LEY逆天 2020.03.13

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

这与“停止键入”不同,如果您担心用户键入一堆东西然后坐在那里而文本框仍处于焦点的情况。

为此,我建议将setTimeout绑定到onclick事件,并假设经过x次没有按键输入的时间之后,用户已停止键入。

梅老丝 2020.03.13

我觉得该input事件的解决方案有点简单

var typingTimer;
var doneTypingInterval = 500;

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

function doneTyping () {
    // code here
}
Tony樱番长 2020.03.13

我认为在这种情况下,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的第一个答复,所以我希望有一天能对某人有所帮助:)

Near小哥西门 2020.03.13

好吧,严格来说,不能,因为计算机无法猜测用户何时完成输入。当然,您可以在启动按键时触发一个计时器,并在以后的每次按键启动时将其重置。如果计时器到期,则用户在计时器持续时间内没有输入-您可以称其为“完成输入”。

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

(除非您当然不能从数据中分辨出何时完成)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android