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

HTML DOM の input number max プロパティは、HTML ドキュメント内にある type="number" の入力フィールドに設定された max 属性の値を取得（返却）および変更するためのプロパティです。このプロパティを利用することで、JavaScript から動的に数値入力欄の上限値を読み取ったり、後から書き換えたりすることが可能になります。

構文

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

1. max の値を取得する

object.max

2. max の値を変更する

object.max = "number"

サンプルコード

ここでは、input number max プロパティの具体的な使用例を紹介します。以下の例では、1〜60 の範囲で出席番号を入力するフォームを作成し、ボタンをクリックすると入力された値が画面に表示されます。

<!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;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input number max/min property Demo</h1>
<p>Enter your roll number (between 1 and 60)</p>
<input type="number" class="numberInput" min="1" max="60">
<button type="button" onclick="showMySelection()" class="btn">Show Roll Number</button>
<div class="show"></div>
<script>
    function showMySelection() {
        var numberInput = document.querySelector(".numberInput");
        var showMsg = document.querySelector(".show");
        console.log(numberInput.min,numberInput.max);
        if(numberInput.value === ''){
            showMsg.innerHTML="Please enter value!!";
        } else{
            if((numberInput.value <= 1) && (numberInput.value <= 60)){
                showMsg.innerHTML = numberInput.value;
            } else{
                showMsg.innerHTML = "Please enter correct roll number!!";
            }
        }
    }
</script>
</body>
</html>

実行結果

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

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

1〜60 の範囲内の任意の出席番号を入力し、「Show Roll Number」ボタンをクリックすると、入力した番号がそのまま画面に表示されます。

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

一方、範囲外の番号を入力してボタンをクリックすると、正しい値の再入力を促す警告メッセージが表示されます。

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

まとめ

input number の max プロパティを使えば、type="number" の入力フィールドに設定された最大値を JavaScript から自由に参照・更新できます。また、同じように最小値を扱う min プロパティも用意されており、両者を組み合わせることで入力値の範囲チェックを柔軟に実装できます。フォームバリデーションや動的な入力制限が必要な場面で、ぜひ活用してみてください。

HTML DOMのinput number minプロパティとは？取得・変更方法を解説

HTML DOM input number の defaultValue プロパティの使い方を解説

HTML DOM Input Number type プロパティとは？使い方をわかりやすく解説
HTML DOM の Input Number type プロパティは、type 属性が「number」に設定された input 要素に関連付けられたプロパティです。このプロパティは、数値入力フィールド（<input type=number>）に対して常に文字列「number」を返します。JavaScript でフォーム要素の種類を動的に確認したい場合などに役立ちます。構文 Input Number type プロパティの構文は以下のとおりです。 numberObject.type サンプルコード HTML DOM Input Number type プロパティの具体的な使用
HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説
HTML DOM の Input Range max プロパティは、レンジスライダー（type=range の入力コントロール）における max 属性の値を設定または取得するために使用されます。max 属性はスライダーが取り得る最大値を示すもので、通常は min プロパティと組み合わせて使用することで、スライダーが動ける値の範囲（最小値〜最大値）を定義します。構文max プロパティに値を設定する場合rangeObject.max = numberここで number は、スライダーコントロールの最大値を表します。max プロパティの値を取得する場合var value = rangeObject