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

HTML DOM Input Week の step プロパティとは？構文と使い方を実例付きで解説

HTML DOM の Input Week step プロパティは、<input type="week"> で入力できる週の間隔（ステップ）を定義するためのものです。このプロパティを設定することで、ユーザーが選択できる週を一定の間隔で制限することができます。

構文

step プロパティの構文は以下のとおりです。

値の取得

inputWeekObject.step

値の設定

step 属性に数値を設定します。

inputWeekObject.step = number

パラメータ

パラメータ number には以下の値を指定できます。

weeks正の整数である限り、すべての値が有効な値として扱われます

サンプルコード

ここで、Input Week step プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、週のステップ間隔が動的に変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Input Week step</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>Week-step</legend>
<label for="WeekSelect">Week and Year :
<input type="week" id="WeekSelect">
</label>
<input type="button" onclick="changeStep('2')" value="Step Weeks by 2">
<input type="button" onclick="changeStep('3')" value="Step Weeks by 3">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function changeStep(myStep) {
        inputWeek.step = myStep;
        divDisplay.textContent = 'Weeks step: '+inputWeek.step;
    }
</script>
</body>
</html>

実行結果

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

「Step Weeks by 3」ボタンをクリックした場合 −

HTML DOM Input Week の step プロパティとは？構文と使い方を実例付きで解説

「Step Weeks by 3」ボタンをクリックしてカレンダーを開いた場合 −

HTML DOM Input Week の step プロパティとは？構文と使い方を実例付きで解説

このように、JavaScript から step プロパティを操作することで、週入力フィールドで選択可能な週の間隔を簡単に制御できます。たとえば step を「3」に設定すれば、カレンダー上で選択できる週が 3 週間ごとに切り替わるようになります。

  1. HTML DOM Input Week の type プロパティとは？使い方を解説

    はじめにHTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputWeekObject.type 要素の type 属性の現在値が文字列として返されます。 値を設定する場合 inputWeekObject.type = stringValue 指定した

  2. HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

    HTML DOM の Input Range step プロパティは、スライダーコントロール（<input type=range>）の step 属性値を設定または取得するために使用されるプロパティです。step プロパティでは、スライダーが 1 回の操作でどれだけ移動するかを指定します。さらに、max 属性と min 属性を step プロパティと組み合わせて使うことで、有効な値の範囲を柔軟に定義することができます。構文step プロパティを設定する場合rangeObject.step = numberここで指定する number は、スライダーコントロールの 1 回あたりの移動