HTMLInputElement: valueAsNumber プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

valueAsNumberHTMLInputElement インターフェイスのプロパティで、<input> 要素の現在の値を数値として表します。数値への変換が不可能な場合は NaN として表されます。

このプロパティは、直接設定することもできます。例えば、何らかの条件に基づいて既定値の数値を設定する場合などです。

要素の値を表す数値、または数値変換が不可能な場合は NaN

数値の受け取り

この例では、number 入力フィールドが変更されたときに、現在の値をログ出力します。

HTML

<input> と関連づけられた <label>、それと出力用に <pre> コンテナーを設置しています。

html
<label for="number">1 から 10 までの数値を選んでください:</label>

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

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

JavaScript

<pre> 要素の innerText は、change イベントが発行されるたびに <input> の現在の値に更新されます。

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

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

結果

ウィジェット内の数値を削除すると、結果は NaN になります。

日付の値を数値として受け取る

この例では、<input>datetime-local 型における valueAsNumber プロパティを説明します。

HTML

<input>datetime-local 型を設置します。

html
<label for="date">日時を選択してください:</label>

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

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

JavaScript

日付または時刻が選択されていない場合、空文字列は NaN に変換されます。選択が行われるたびに change イベントが発行され、フォームコントロールの HTMLInputElement.value を数値として比較した結果が、<pre> の内容に反映されます。

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

logElement.innerText = `初期値: ${inputElement.valueAsNumber}`;

inputElement.addEventListener("change", () => {
  const d = new Date(inputElement.valueAsNumber);
  logElement.innerText = `${inputElement.value}${inputElement.valueAsNumber} に解決され、\nこれは ${d.toDateString()}${d.toTimeString()} を表します。`;
});

結果

仕様書

Specification
HTML
# dom-input-valueasnumber-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
valueAsNumber

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報