onChange / onInput 替代品？

Question

我正在创建一个打字测试页面并遇到一个小问题。

我试图在用户键入时启动计时器，并且使用 onInput 可以工作，但问题是每次我键入 textArea 时它都会注册，这会导致 starttimer 函数重复自身。

onChange 有效，但仅在我在页面外部单击后才有效，这很有意义，但不是我要寻找的。我需要在用户开始打字后立即启动计时器。也可以使用 onChange 停止功能，但在我点击页面外部后计时器开始。

是否有适合我正在寻找的 JS 事件，或者有没有办法更改 onInput 或 onChange 来解决我遇到的问题。

JavaScript

document.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>&nbsp; $(document).ready(function(){&nbsp; &nbsp; $("#test-area").one("keydown", function() {&nbsp; &nbsp; &nbsp; &nbsp;alert("hey");&nbsp; &nbsp; });&nbsp; });</script>