数字类型输入的onkeyup与onchange

Question

我在处理表单上的数字输入时遇到一个小问题，特别是在用户修改表单时尝试调用验证js函数时。

<input type="number" name="somenumber" onkeyup="validateForm()" />

仅当用户在框中键入数字时，此方法才会调用；当用户使用浏览器提供的上/下按钮时，将忽略此方法。因此它并不完全有效。

<input type="number" name="somenumber" onchange="validateForm()" />

此方法对使用向上/向下按钮的用户非常有用，但是如果他们在框中键入数字，则只有在他们移至另一个元素或在框外单击时才会执行。这不是世界末日，但我希望用户能够在框中键入内容并立即能够单击当前禁用的“提交”按钮，而不必单击其他位置以启用该按钮。

<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" />

因此，为了获得最佳的用户体验，我正在这样做。问题在于该函数经常被调用两次。我猜它很好用。用户甚至没有注意到它正在运行两次。不过，似乎我缺少了一些东西，必须有某种“正确”的方式来处理此问题。

在那儿？还是这只是我们必须解决的事情之一？

Answer 1

您可以使用该oninput事件。

function validateForm() {
  console.log('changed');
}

<input type="number" name="somenumber" oninput="validateForm()" />