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

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

HTML DOM Input Time の defaultValue プロパティとは

HTML DOM の Input Time defaultValue プロパティは、<input type="time"> で作成した時刻入力フィールドに対するデフォルト値（初期値）を取得・設定するためのプロパティです。

value プロパティの値は、ユーザーが時刻を操作するたびに更新されますが、defaultValue の値は変化しません。常に HTML 上で指定された初期値を保持しているため、フォームのリセット処理などで活用できます。

構文

defaultValue プロパティの基本構文は以下の通りです。

値を取得する場合（文字列として返される）

inputTimeObject.defaultValue

defaultValue に文字列を設定する場合

inputTimeObject.defaultValue = 'string'

サンプルコード

それでは、Input Time の defaultValue プロパティを使った具体例を見てみましょう。この例では、ボタンをクリックすると会議の時刻を変更でき、別のボタンでデフォルト値に戻せるようになっています。

<!DOCTYPE html>
<html>
<head>
<title>Input Time defaultValue</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Time-defaultValue</legend>
<label for="TimeSelect">Meeting At:
<input type="time" id="TimeSelect" value="09:30">
</label><br>
<input type="button" onclick="changeMeet('Alternate')" value="Alternate Meeting Time">
<input type="button" onclick="changeMeet('Default')" value="Default Meeting Time"><br>
<input type="button" onclick="confirmMeet()" value="Confirm Meeting">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    function changeMeet(string) {
        if (inputTime.disabled === false) {
            if(string === 'Alternate')
                inputTime.value = '10:30';
            else
                inputTime.value = inputTime.defaultValue;
        }
    }
    function confirmMeet() {
        inputTime.disabled = true;
        divDisplay.textContent = 'Meeting fixed at : '+inputTime.value;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のように動作します。

「Alternate Meeting Time（別の会議時刻）」ボタンをクリックする前：

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

「Alternate Meeting Time」ボタンをクリックして時刻入力を変更した状態：

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

「Default Meeting Time（既定の会議時刻）」ボタンをクリックしてデフォルト値に戻した後：

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

「Confirm Meeting（会議を確定）」ボタンをクリックして時刻を固定した後：

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

まとめ

defaultValue プロパティは、value 属性で指定された初期値を常に保持しており、ユーザー操作による value の変化の影響を受けません。時刻入力フィールドを初期状態へ戻したい場合などに便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM TextareaのdefaultValueプロパティの使い方を解説

    defaultValueプロパティとはHTML DOM TextareaのdefaultValueプロパティは、HTMLドキュメント内のテキストエリア（textarea）要素の初期値（デフォルト値）を取得および変更するために使用されます。なお、defaultValueプロパティは、ユーザーが入力した現在の値（valueプロパティ）とは異なり、HTML上で最初に設定された内容を指す点に注意してください。構文以下がdefaultValueプロパティの構文です。1. defaultValueの取得object.defaultValue2. defaultValueの設定object.defaultV

  2. HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime