このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
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 2015年7月.
value は HTMLInputElement インターフェイスのプロパティで、この <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}`;
});
#log {
height: 20px;
padding: 0.5rem;
background-color: #ededed;
}
結果
[フレーム]
色の値を受け取る
この例では、<input> の color の value プロパティを示します。
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}`;
});
#log {
height: 20px;
padding: 0.5rem;
background-color: #ededed;
}
結果
[フレーム]
仕様書
| Specification |
|---|
| HTML # dom-input-value |
ブラウザーの互換性
Loading...