HTMLInputElement: valueAsNumber 属性
HTMLInputElement 接口的 valueAsNumber 属性表示 <input> 元素的当前值（如果可以转换为数字），或者在无法转换为数字时返回 NaN。
此属性也可以直接设置，例如根据某些条件设置默认数值。
值
一个表示元素值的数字，或者在无法进行数字转换时为 NaN。
示例
检索数字值
在此示例中，当 number 输入框的值发生更改时，日志会显示其当前值。
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 |
浏览器兼容性
加载中…