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 |
瀏覽器相容性
載入中…