HTMLInputElement: valueAsNumber プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

valueAsNumber は HTMLInputElement インターフェイスのプロパティで、<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}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

結果

ウィジェット内の数値を削除すると、結果は 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()} を表します。`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

結果

仕様書

HTML
# dom-input-valueasnumber-dev

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

MDN の改良に協力

このページは役に立ちましたか？

はいいいえ

協力方法を知る

このページは MDN の貢献者によって 2024年10月23日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

HTMLInputElement: valueAsNumber プロパティ

目次

値

例

数値の受け取り

HTML

JavaScript

結果

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

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力