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

HTML DOM input month の step プロパティとは？取得・設定方法を解説

HTML DOM の input month step プロパティは、HTML ドキュメント内の <input type="month"> フィールドに設定された step 属性の値を取得（return）および変更（modify）するために使用されます。

step プロパティの役割

step 属性は、月を選択する際に許容される間隔（ステップ数）を指定します。たとえば step を「2」に設定すると、選択できる月が2か月刻みで制限されるため、ユーザーが入力できる値を細かくコントロールできます。このプロパティを使えば、JavaScript から動的にその値を読み取ったり、後から変更したりすることが可能です。

構文

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

1. step の値を取得する場合

object.step

2. step の値を変更する場合

object.step = "number";

「number」には任意の整数を指定できます。既定値は「1」です。

サンプルコード

それでは、HTML DOM input month step プロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックして step 値を「3」に設定し、その後現在の step 値を表示します。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    input{
        display:block;
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
        margin:1rem auto;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        color:#db133a;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input month step property Demo</h1>
<p>こんにちは。休暇の月を選択してください</p>
<input type="month" class="monthInput">
<button type="button" onclick="setStep()" class="btn">Step = 3</button>
<button type="button" onclick="getStep()" class="btn">クリックして step 値を表示</button>
<div class="show"></div>
<script>
    function setStep(){
        var monthInput = document.querySelector(".monthInput");
        monthInput.step="3";
    }
    function getStep() {
        var monthInput = document.querySelector(".monthInput");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML = monthInput.step;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM input month の step プロパティとは？取得・設定方法を解説

まず「Step=3」ボタンをクリックして step 属性の値を「3」に設定しましょう。その後に月を選択し、別の月へ変更しようとしてみてください。月が3か月単位でしか切り替えられないことが確認でき、step プロパティの動作がよくわかります。

HTML DOM input month の step プロパティとは？取得・設定方法を解説

HTML DOM input month の step プロパティとは？取得・設定方法を解説

まとめ

input month の step プロパティを使うことで、月入力フィールドで選択可能な月の間隔を JavaScript から柔軟に制御できます。フォームの入力ルールを動的に変更したい場合にぜひ活用してみてください。

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

    HTML DOM の Input Week step プロパティは、<input type=week> で入力できる週の間隔（ステップ）を定義するためのものです。このプロパティを設定することで、ユーザーが選択できる週を一定の間隔で制限することができます。構文step プロパティの構文は以下のとおりです。値の取得inputWeekObject.step値の設定step 属性に数値を設定します。inputWeekObject.step = numberパラメータパラメータ number には以下の値を指定できます。weeks正の整数である限り、すべての値が有効な値として扱われますサンプ

  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 回あたりの移動