onChange / onInput 替代品？

Question

我正在创建一个打字测试页面并遇到一个小问题。我试图在用户键入时启动计时器，并且使用 onInput 可以工作，但问题是每次我键入 textArea 时它都会注册，这会导致 starttimer 函数重复自身。onChange 有效，但仅在我在页面外部单击后才有效，这很有意义，但不是我要寻找的。我需要在用户开始打字后立即启动计时器。也可以使用 onChange 停止功能，但在我点击页面外部后计时器开始。是否有适合我正在寻找的 JS 事件，或者有没有办法更改 onInput 或 onChange 来解决我遇到的问题。JavaScriptdocument.getElementById("test-area").onchange = function () {      startTimer(1);};谢谢你。

Answer 1

您需要收听该input事件，因为正如您所说change，仅在输入失去焦点后触发，这不是您想要的。您还需要只处理一次事件。

document.getElementById("test-area").addEventListener("input", () => {

  startTimer(1);

}, {once: true});

请注意，这会在触发事件处理程序后删除它。如果您需要再次运行它，您将不得不再次注册该事件。也许在您的计时器回调中。

Answer 2

一些解决方案：

变体 1

只需创建一个标志：

var timerStarted = false; // Was the timer started?

document.getElementById("test-area").oninput = function () {

      if(timerStarted) return; // If timer was started - do nothing

      startTimer(1); // Else - start the timer

      timerStarted = true; // Remember what we've started the timer

};

变体 2

（有点短）

document.getElementById("test-area").addEventListener("input", function () {

      startTimer(1);

}, {once: true}); // Good thing about addEventListener

//                   With this it will run the event only single time

更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 3

你试过 onfocus 吗？它不完全是他们开始打字的时间，但它确实有效。另一种选择是您使用 onInput 并在时钟启动功能上将布尔值 -isRunning - 更改为 true。然后放一个 if (isRunning) 返回。就像是：

function start() {

  if(isRunning) return;

  isRunning = true;

}

然后在停止 onChange 时将布尔值更改为 false

Answer 4

可以用 JQuery 吗？如果是这样，它有一个方法 .one() 将只执行一次函数。然后您可以自由使用 keydown/keyup 事件处理程序。例如。

<script>

  $(document).ready(function(){

    $("#test-area").one("keydown", function() {

       alert("hey");

    });

  });

</script>