Question

我想做的是，有一个input框，当用户键入任何内容时，代码应向服务器发出请求并向用户取回一些数据。

这只是typeahead个建议功能，但仍然不完全相同。

我目前拥有的是以下代码

$("input").on("input", function(ev) {
alert(`${ev.type} event detected`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text">

并且代码按预期工作，也就是说，每当input框值更改时，都会捕获该事件。

我的问题是，如何使代码在处理input更改事件之前等待几秒钟或几毫秒？ 1000ms停止更改后，请说出代码input。

从现在开始，我输入的每个字母都会触发代码，这将导致很多我不希望发生的事件。

Answer 1

您可以在按下一个键时设置一个计时器，如果按下另一个键并且该计时器仍在运行（timer var不为null），则在重新设置计时器之前将其取消。

var timer;
$("input").on("input", function(ev) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(function(){
        console.log(`${ev.type} event detected`);
        timer = null;
    }, 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text">

Answer 2

这是示例代码，可在键入后1秒钟内执行。

基本上是做什么的。只需在按下键之前设置setTimeout，然后在1000ms之前设置clearingTimeout，再按下另一个键即可。否则，将执行setTimeout。

var typingTimer;
var doneTypingInterval = 1000;
$("input[type='text']").on('input', function(e) {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
function doneTyping() {
  alert("Hey!");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text">

Answer 3

您需要做的就是设置一个超时和一个标志。对于每个事件，都将标志设置为true，但是当发生超时时，您只需运行一次代码，然后为以后的事件重置标志。

$("input").on("input", function(ev) {
  $(this).data({
    changed: true
  });
  window.setTimeout(() => {
    if ($(this).data("changed") == true) {
      alert(`${ev.type} event detected`);
      $(this).data({
        changed: false
      });
    }
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text" />

Answer 4

要在用户输入时检测input值的变化，只需检查onInput事件-

 $('#testId').on("input", function (e) {
   var valInput = $('#testId').val();
   $('#inputVal').html(valInput);
   $('#inputChar').html(valInput.length);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="testId" />

<br />
<br />

<div>You typed : <strong><span id="inputVal"></span></strong> </div>

<br />

<div>No. of character : <strong><span id="inputChar">0</span></strong> </div>

如何检测用户输入时“输入”值的变化？

4 个答案: