javascript - 为什么 1. 当我尝试使用 javascript 和 html5 获取输入类型数字的值时返回空字符串？

Question

我有一个正常的输入如下:

<input type="number" name="quantity" id="myInput">

如果我输入“1”。 (当然没有引号)当我尝试使用

获取输入值时

document.getElementById("myInput").value

只得到一个空字符串。
有没有其他方法可以得到“1”。用javascript输入？

编辑

我正在使用 Polymer 1.0 和数据绑定(bind)，因此在我的示例中，我展示了使用普通的 JavaScript 语法，目的是仅使用 javascript 找到解决我的问题的方法。我只想知道如何访问返回输入值的属性，我认为应该将其存储在对象的某些属性中。

Answer 1

如果您使用 <input type="number">该元素增加了一个额外的属性 valueAsNumber .所以不是

document.getElementById("myInput").value

使用

document.getElementById("myInput").valueAsNumber

valueAsNumber将返回 NaN如果在 input not 中输入的值可转换为数字，则不为空。还有一个validity属性保存当前值的状态信息，既根据假定数字的值，也根据数字输入的设置，即“为什么数字无效”。

有趣的数字输入，在各种浏览器中尝试一下:

<input type="number" name="quantity" id="myInput" ><br>
<input type="text" id="value" ><br>
<input type="text" id="valueAsNumber" ><br>
<input type="text" id="validity" ><br>

document.getElementById("myInput").onkeyup = function() {
  document.getElementById("value").value = this.value;
  document.getElementById("valueAsNumber").value = this.valueAsNumber;
  document.getElementById("validity").value = '';
  for (validity in this.validity) {
     if (this.validity[validity]) {
       document.getElementById("validity").value+=validity+' ';
     }
  }
}

实际上非常有用，如果您想确切地调查为什么您从输入中得到一个空值 -> http://jsfiddle.net/oaewv2Lr/ 尝试过 Chrome、Opera 和 FF - Chrome 似乎是这三个浏览器中最“宽容”的浏览器。