数字类型输入的 onkeyup 与 onchange答案

【问题标题】：onkeyup vs onchange for number type input数字类型输入的 onkeyup 与 onchange
【发布时间】：2017-02-14 22:54:34
【问题描述】：

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

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

该方法仅在用户在框中键入数字时调用，并且在用户使用浏览器提供的向上/向下按钮时被忽略。所以它并不完全有效。

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

此方法非常适合使用向上/向下按钮的用户，但如果他们在框中输入数字，则在他们移动到另一个元素或在框外单击之前，它不会执行。这不是世界末日，但我希望用户能够在框中键入并立即能够单击当前禁用的提交按钮，而不必单击其他地方来启用该按钮。

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

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

有吗？或者这只是我们必须解决的问题之一？

【问题讨论】：

【解决方案1】：

您可以使用oninput 事件。

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

&lt;input type="number" name="somenumber" oninput="validateForm()" /&gt;

【讨论】：