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

HTML DOM 入力番号（number）のstepプロパティとは？取得・変更方法を解説

HTML DOM の input number の step プロパティは、HTML ドキュメント内にある数値入力フィールド（<input type="number">）の step 属性の値を取得したり、変更したりするために使用されます。

step 属性は、数値入力フィールドで上下ボタンやキーボード操作によって値を増減させる際の刻み幅（ステップ数）を指定するものです。デフォルト値は「1」に設定されています。

構文

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

step 値を取得する場合

object.step

step 値を変更する場合

object.step = "number"

サンプルコード

それでは、HTML DOM input number の step プロパティの具体的な使用例を見ていきましょう。以下の例では、ボタンをクリックすることで step 値を「5」に設定し、その後現在の 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 number step property Demo</h1>
<p>Hi, Enter any number & then try to increment/decrement its value</p>
<input type="number" class="numberInput">
<button type="button" onclick="setStep()" class="btn">Set step to 5</button>
<button type="button" onclick="getStep()" class="btn">Click me to show step value</button>
<div class="show"></div>
<script>
    function setStep(){
        var numberInput = document.querySelector(".numberInput");
        numberInput.step="5";
    }
    function getStep() {
        var numberInput = document.querySelector(".numberInput");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML = numberInput.step;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM 入力番号（number）のstepプロパティとは？取得・変更方法を解説

まず、数値入力フィールドに任意の数値を入力し、「Set step to 5」ボタンをクリックして step 値を「5」に設定します。

HTML DOM 入力番号（number）のstepプロパティとは？取得・変更方法を解説

次に、上向きキー（↑）と下向きキー（↓）を使って値を増減させてみてください。step が「5」に設定されているため、値は 5 ずつ変化することが確認できます。

HTML DOM 入力番号（number）のstepプロパティとは？取得・変更方法を解説

最後に、「Click me to show step value」ボタンをクリックすると、現在設定されている step 値が画面に表示されます。

HTML DOM 入力番号（number）のstepプロパティとは？取得・変更方法を解説

まとめ

input number の step プロパティを使うことで、JavaScript から動的に数値入力フィールドの増減幅を制御できます。フォームのバリデーションやユーザービリティの向上など、さまざまな場面で活用できる便利なプロパティですので、ぜひ覚えておきましょう。

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

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

  2. HTML DOMのnodeTypeプロパティとは？使い方と戻り値の一覧を解説

    HTML DOMのnodeTypeプロパティは、ノードの種類に対応する数値を返すプロパティです。JavaScriptでDOMを操作する際、対象のノードが要素なのかテキストなのかコメントなのかを判別したい場面でよく使われます。 nodeTypeプロパティの構文 構文は以下のとおりです。読み取り専用のため、値を取得することしかできません。 Node.nodeType 戻り値の一覧 nodeTypeプロパティが返す主な数値は次のとおりです。 1 … 要素ノード（element node） 2 … 属性ノード（attribute node） 3 … テキストノード（text node） 8 … コメ