用输入类型="数字"区分NaN输入和空输入

Question

我想使用type ="number"的表单输入,只允许输入数字.

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

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

是否有一种很好的方法可以区分NaN输入和空("")输入？

Answer 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) {