このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> コンテナーを設置しています。
<label for="number">1 から 10 までの数値を選んでください:</label><input name="number" min="1" max="10" type="number" /><pre></pre>JavaScript
<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 プロパティを説明します。
HTML
<input> のdatetime-local 型を設置します。
<label for="date">日時を選択してください:</label><input name="date" type="datetime-local" /><pre></pre>JavaScript
日付または時刻が選択されていない場合、空文字列は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;}結果
仕様書
| Specification |
|---|
| HTML # dom-input-valueasnumber-dev |