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

为了获得最佳的用户体验，我这样做。问题在于该函数经常被调用两次。我想它应该没有问题，用户甚至没有注意到它运行了两次。尽管如此，似乎我错过了什么，必须有一种“正确”的方法来处理这个问题。是否存在这样的方法？或者这只是我们必须解决的其中一件事情？

- Anonymous Man

Answer 1

你可以使用oninput事件。

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

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

- K Scandrett

---

太好了。我的开发环境可能有点过时了。它从未听说过oninput并将其标记为未知属性。 - Anonymous Man

@K Scandrett：如何在JS中制作一个函数？ - KiRa

@K没事了，兄弟。我看到一个示例 $("#ID").on('input',function(){ /* */ });。谢谢。 - KiRa