首页 文章

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

提问于
浏览
3

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

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

我没有提交按钮,而是在输入失去焦点后检查该值 . 但是,当您使用type = "number"并输入非数字时,输入的 valueAsNumbervalue 属性将无用(NaN分别为“"). The problem with this is that I want to differentiate between the user entering an empty string ("”),并且用户输入非数字值(例如123abc) . 当输入为空时我想执行函数a,如果它只是一个非数字,我想执行函数b(否则执行c) .

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

1 回答

  • 7

    问题是输入类型的数字做了很多东西,并且它的规范没有向你公开实际的无效值 . 因此空输入和无效字符串看起来相同 . 所以你需要使用 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) {
    

相关问题