使用输入type =“number”区分NaN输入和空输入

我想使用type =“number”的表单输入并且只允许输入数字。使用输入type =“number”区分NaN输入和空输入

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

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

是否有一种很好的方法来区分NaN输入和像这样的空（“”）输入？

来源

2014-11-03 usealbarazer

也许我误解你的问题，但为什么不'如果（价值=== NAN）'和'如果（价值===“”）' ？ – 2014-11-03 19:58:44

关于NaN的有趣之处在于它不等于它本身...... NaN === NaN // false' – 2014-11-03 20:00:11

@Jordan：无论是否（值=== NaN）'总是'false' “价值”是什么。 'NaN'没有'==='，包括'NaN'。 – 2014-11-03 20:04:06

问题是输入类型的数字在封面下面做了很多东西，并且它的规范没有向您公开实际的无效值。所以一个空输入和一个无效字符串看起来是一样的。所以，你需要使用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 (!isValid && this.validity.valueMissing) {

来源

2014-11-03 20:15:34 epascarello

我完全不知道有效性属性。它确实是我需要的，谢谢！ – usealbarazer 2014-11-03 20:19:01

如果您使用的是有效性，那么您应该使用“输入”事件，因为所有支持有效性的浏览器都支持输入事件 – brunoais 2016-02-04 16:36:13

使用输入type =“number”区分NaN输入和空输入

回答

相关问题