HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Text defaultValue プロパティの使い方を解説

Input Text defaultValue プロパティとは

HTML DOM の Input Text defaultValue プロパティは、テキストフィールドのデフォルト値(defaultValue)を設定または取得するために使用されるプロパティです。要素の defaultValue とは、HTML の value 属性に指定された値を指します。

value プロパティとの違いは、defaultValue プロパティが最初に指定された元のデフォルト値を保持し続けるのに対し、value プロパティの値はユーザーが入力フィールドに入力した内容に応じて変化するという点です。つまり、ユーザーがテキストを書き換えても defaultValue を参照すれば、常に初期状態の値を取得できます。

構文

defaultValue プロパティを設定するための構文は以下の通りです。

textObject.defaultValue = value

ここで「value」には、テキストフィールドに設定したいデフォルト値を文字列で指定します。

使用例

Text defaultValue プロパティの具体的な使用例を見てみましょう。このサンプルでは、CHANGE ボタンをクリックするとテキストフィールドのデフォルト値が変更され、その結果が画面に表示されます。

<!DOCTYPE html>
<html>
<body>
<h1>Input Text defaultValue Property</h1>
USERNAME: <input type="text" id="TEXT1" value="RON_1" autofocus>
<p>CHANGE ボタンをクリックすると、上のテキストフィールドのデフォルト値が変更されます</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeDefault() {
        document.getElementById("TEXT1").defaultValue="ROHAN_2";
        var P=document.getElementById("TEXT1").defaultValue;
        document.getElementById("Sample").innerHTML = "Default value has been changed from RON_1 to "+P ;
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM Input Text defaultValue プロパティの使い方を解説

HTML DOM Input Text defaultValue プロパティの使い方を解説

補足:defaultValue の活用シーン

defaultValue プロパティは、フォームをリセット(reset() メソッド)した際にテキストフィールドへ戻る値としても機能します。また、ユーザーによる入力後も JavaScript 側から初期状態の値を参照したい場合などに非常に便利です。フォームのバリデーションや入力内容の差分チェックなどでも活用できます。

  1. HTML DOM 入力週（Input Week）のdefaultValueプロパティの使い方を解説

    Input Week（週入力）の defaultValue プロパティは、週入力フィールドに対応するデフォルト値を設定・取得するためのプロパティです。value 属性はユーザーが週入力をリセットすると変化しますが、defaultValue の値は変化しません。この性質により、フォームを初期状態に戻す処理などで活用できます。 構文 以下が構文です。 文字列値を取得する場合 inputWeekObject.defaultValue defaultValue に文字列を設定する場合 inputWeekObject.defaultValue = string サンプルコード それでは、Inpu

  2. HTML DOM Input Text defaultValue プロパティの使い方を解説

    Input Text defaultValue プロパティとはHTML DOM の Input Text defaultValue プロパティは、テキストフィールドのデフォルト値(defaultValue)を設定または取得するために使用されるプロパティです。要素の defaultValue とは、HTML の value 属性に指定された値を指します。value プロパティとの違いは、defaultValue プロパティが最初に指定された元のデフォルト値を保持し続けるのに対し、value プロパティの値はユーザーが入力フィールドに入力した内容に応じて変化するという点です。つまり、ユーザーがテキ