输入 type="number" 和 IE10+

Question

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

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

我的问题是 IE11（我相信 IE10）似乎为非数字输入返回了一个空白的 .value 属性。也就是说，如果我在框中输入abc，.value 就是""。这让我无法区分黄色（空白）和红色（垃圾）。

我知道新的 .valueAsNumber 属性的存在，但这并不能完全帮助我，因为我无法区分其他浏览器上的空和 IE10/11 上的非数字（.value 为空，@ 987654328@ 是NaN)。

有人解决了这个问题吗？我不想求助于跟踪按键，我想支持旧版浏览器（回到 IE8）恢复到type="text" 并且没有.valueAsNumber。提前谢谢...

编辑：只是为了澄清（希望如此），我的问题是 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]，这样就可以解决你的问题了。