Question

我想使用type =＆＃34; number＆＃34;并且只允许输入数字。

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

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

有没有一种很好的方法来区分NaN输入和空（＆＃34;＆＃34;）这样的输入？

Answer 1

问题是输入类型的数字做了很多东西，并且它的规范没有向你公开实际的无效值。因此空输入和无效字符串看起来相同。因此，您需要使用validity

进行一些调查工作

＆＃13;

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;
  }

});

＆＃13;

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

＆＃13;

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

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

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

1 个答案: