HTMLInputElement: valueAsNumber 属性

valueAsNumber 属性是 HTMLInputElement 接口的属性，表示当前 <input> 元素的值作为数字，如果无法转换为数字，则为 NaN。

此属性也可以直接设置，例如，根据某些条件设置默认数字值。

值

表示元素值的数字，如果无法进行数字转换，则为 NaN。

示例

检索数字值

在此示例中，日志显示 数字 输入在更改时的当前值。

HTML

我们包含一个类型为 number 的 <input> 和一个关联的 <label>，以及一个 <pre> 容器用于我们的输出。

html
<label for="number">Pick a number between 1 and 10:</label>

<input name="number" id="number" min="1" max="10" type="number" />

<pre id="log"></pre>

JavaScript

每次触发 change 事件时，<pre> 元素的 innerText 会更新为 <input> 的当前值。

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");

inputElement.addEventListener("change", () => {
  logElement.innerText = `Number: ${inputElement.valueAsNumber}`;
});

结果

如果删除小部件中的数字，则结果为 NaN。

检索日期值作为数字

此示例演示了类型为 datetime-local 的 <input> 的 valueAsNumber 属性。

HTML

我们包含一个类型为 datetime-local 的 <input>

html
<label for="date">Pick a date and time:</label>

<input name="date" id="date" type="datetime-local" />

<pre id="log"></pre>

JavaScript

当没有选择日期或时间时，空字符串将解析为 NaN。每次进行选择时，都会触发 change 事件，更新 <pre> 内容，显示表单控件的 HTMLInputElement.value 与该值作为数字的比较。

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Initial value: ${inputElement.valueAsNumber}`;

inputElement.addEventListener("change", () => {
  const d = new Date(inputElement.valueAsNumber);
  logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsNumber}, \nwhich is ${d.toDateString()} at ${d.toTimeString()}`;
});

结果

规范

规范
HTML 标准
# dom-input-valueasnumber-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载

另请参阅