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]，因此这将解决您的问题。

输入类型=“数字”和IE10 +

2 个答案: