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

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

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

Baseline Widely available

valueAsNumber は HTMLInputElement インターフェイスのプロパティで、<input> 要素の現在の値を数値として表します。数値への変換が不可能な場合は NaN として表されます。

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

要素の値を表す数値、または数値変換が不可能な場合は NaN。

この例では、number 入力フィールドが変更されたときに、現在の値をログ出力します。

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

<label for="number">1 から 10 までの数値を選んでください:</label>

<input name="number" id="number" min="1" max="10" type="number" />

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

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

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

<input> の datetime-local 型を設置します。

<label for="date">日時を選択してください:</label>

<input name="date" id="date" type="datetime-local" />

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

日付または時刻が選択されていない場合、空文字列は NaN に変換されます。選択が行われるたびに change イベントが発行され、フォームコントロールの HTMLInputElement.value を数値として比較した結果が、<pre> の内容に反映されます。

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

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