Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/value below:

HTMLInputElement: value プãƒãƒ‘ティ - Web API

Baseline Widely available

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

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

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

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

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

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

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

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

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

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 プロパティを示します。

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

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

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

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

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4