1. 開発者向けのウェブ技術
  2. Web API
  3. HTMLInputElement
  4. valueAsNumber

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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

結果

ウィジェット内の数値を削除すると、結果は 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

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

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