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 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;
}

結果

仕様書

Specification

HTML
# dom-input-valueasnumber-dev

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年10月23日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: valueAsNumber プロパティ

In this article

値

例

数値の受け取り

HTML

JavaScript

結果

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

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN