javascript - 数字类型输入的onkeyup vs 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()" />