使用 type="number" 的 Input 区分 NaN 输入和空输入答案

【问题标题】：Differentiate between NaN input and empty input with an Input of type="number"使用 type="number" 的 Input 区分 NaN 输入和空输入
【发布时间】：2014-11-03 19:56:50
【问题描述】：

我想使用 type="number" 的表单输入，并且只允许输入数字。

<input type="number" class="form-control fc-input"/>

我没有提交按钮，而是在输入失去焦点后检查值。但是，当您使用 type="number" 并输入非数字时，输入的 valueAsNumber 和 value 属性将无用（分别为“NaN”）。这样做的问题是我想区分用户输入空字符串（“”）和用户输入非数字值（例如 123abc）。当输入为空时我想执行函数a，如果它只是一个非数字我想执行函数b（否则执行c）。

有没有像这样区分 NaN 输入和空 ("") 输入的好方法？

【问题讨论】：

也许我误解了你的问题，但为什么不是if(value === NaN) 和if(value === "")？
NaN 的有趣之处在于它不等于自身...NaN === NaN // false
@Jordan：if(value === NaN) 永远是false，不管value 是什么。没有什么是=== 到NaN，包括NaN。
@Jordan 问题是，每当我输入空字符串（删除所有输入）和输入 NaN 值（“abc”）时，该值将始终为“”，同时valueAsNumber 将始终为 NaN，因此我无法区分这两种情况。

标签： javascript jquery html validation

【解决方案1】：

问题是数字的输入类型在幕后做了很多事情，并且它的规范不会向您公开实际的无效值。所以一个空的输入和一个无效的字符串看起来是一样的。所以你需要使用validity做一些调查工作

var result = document.getElementById("result");

document.getElementById("num").addEventListener("keyup", function() {
  var isValid = this.validity.valid;
  var len = this.value.length;

  if (isValid && !len) {
      result.innerHTML = "No value";
  } else if (!isValid) {
      result.innerHTML = "Invalid number";
  } else {
      result.innerHTML = "Valid number: " + this.valueAsNumber;
  }

});

<input type="number" id="num" />
<span id="result"></span>

上面代码的问题是，如果你要求它，空检查将失败。如果需要，则需要进行 if 检查

if (!isValid && this.validity.valueMissing) {

【讨论】：

我完全不知道有效性属性。它正是我需要的，谢谢！
如果你使用有效性，那么你应该使用“输入”事件，因为所有支持有效性的浏览器也支持输入事件