onkeyup vs onchange for number type input

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()" />