HTMLInputElement: value プロパティ

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.

valueHTMLInputElement インターフェイスのプロパティで、この <input> 要素の現在の値を文字列で表します。

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

この <input> 要素の値を含む文字列、または入力要素に値が設定されていない場合は空文字列です。

text 型の input の値を受け取る

この例では、ユーザーが入力フィールドにデータを入力すると、ログに現在の値を表示します。

HTML

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

html
<label for="givenname">あなたの名前:</label>

<input name="given-name" id="given-name" />

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

JavaScript

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

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("given-name");

inputElement.addEventListener("keyup", () => {
  logElement.innerText = `名前: ${inputElement.value}`;
});

結果

色の値を受け取る

この例では、<input>colorvalue プロパティを示します。

HTML

<input>color 型を設置します。

html
<label for="color">色を選んでください:</label>

<input name="color" id="color" type="color" />

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

JavaScript

<pre> 要素の innerText は、既定の色値 (#000000) で更新され、 change イベントが発行されるたびに更新されます。

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

logElement.innerText = `Color: ${inputElement.value}`;

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

結果

仕様書

Specification
HTML
# dom-input-value

ブラウザーの互換性

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
value

Legend

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

Full support
Full support

関連情報