输入type="number“和IE10+

Question

我正在尝试使用HTML5 <input type="number">元素对数字字段进行Javascript客户端验证。还有服务器端验证，所以让我们不要对此大惊小怪……;)

我希望提供三种状态级别的验证:绿色表示定义范围内的有效数字，黄色表示超出范围的数字或空字段，红色表示非数字输入。

我的问题是，对于非数值型输入，IE11 (我相信是IE10)似乎会返回一个空白的.value属性。也就是说，如果我在框中键入abc，.value就是""。这使我无法区分黄色(空白)和红色(垃圾)。

我知道新的.valueAsNumber属性的存在，但这对我没有完全的帮助，因为我不能区分其他浏览器上的空和IE10/11上的非数字(.value为空，.valueAsNumber为NaN)。

有没有人解决了这个问题？我不想求助于跟踪按键，我想支持恢复到type="text"并且没有.valueAsNumber的旧浏览器(回到IE8)。先谢谢你...

编辑:为了澄清(希望如此)，我的问题是IE10/11中的.value和.valueAsNumber的输出不允许我区分无输入和非数值型输入。我希望能够区分这两种情况，而不需要浏览器嗅探和退回到type="text"。

Answer 1

您能不能只分配一个合理的默认值(零)？添加到您的输入类？那么你就不需要在你的代码中进行区分了？

在我的书中，实用主义总是胜过巧妙;)

Answer 2

继续在支持valueAsNumber的浏览器中使用它。

var
  coerced,
  value,
  input = yourInput;

if(typeof input.valueAsNumber !== "undefined") {
   value = (isNaN(input.valueAsNumber)) ? "dummystring" : input.valueAsNumber;
} else {
   value = input.value; 
}

if(typeof input.value === "string") {
 //non-numeric
} else {
 coerced = +input.value;
 //do validation on coerced - it is now a number
}

支持valueAsNumber的浏览器，它们也支持input[type=number]，所以这将解决您的问题。