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

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

HTML DOMのinput number minプロパティは、HTMLドキュメント内で type="number" が指定された入力フィールド（数値入力欄）の min 属性の値を取得・変更するためのプロパティです。

min 属性は、ユーザーが入力できる数値の下限値（最小値）を定義します。このプロパティを使うことで、JavaScriptから動的にその値を読み取ったり、書き換えたりすることが可能になります。

構文（Syntax）

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

1. min属性の値を取得する場合

object.min

2. min属性の値を変更する場合

object.min = "number";

設定する値は文字列形式の数値（例："10"）を指定します。

サンプルコード

ここでは、HTML DOMのinput number minプロパティを使った具体的な例を見てみましょう。以下のコードは、出席番号（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>出席番号を入力してください（1〜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>

補足： 元のコードでは範囲チェックの条件式に誤りがありましたが、上記のサンプルでは正しく動作するよう (value >= 1) && (value <= 60) という条件に修正しています。

実行結果

このコードを実行すると、以下のような画面が表示されます。

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

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

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

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

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

まとめ

  • minプロパティは、type="number" の入力フィールドに設定された min 属性の値を取得・変更できる。
  • 値の取得は object.min、変更は object.min = "数値" の形式で行う。
  • フォームの入力バリデーションや動的な制御に活用でき、max プロパティと組み合わせて使うことで、入力可能な数値の範囲を柔軟に管理できる。
  1. HTML DOM Input Rangeのminプロパティとは?構文と使い方を解説

    HTML DOM Input RangeのminプロパティとはHTML DOMのInput Range minプロパティは、レンジスライダーコントロールのmin属性値を設定または取得するために使用されます。この属性はスライダーコントロールの最小値を示すもので、通常はmaxプロパティと組み合わせて、スライダーが移動できる値の範囲を定義する際に活用されます。構文minプロパティの構文は以下の通りです。minプロパティの値を設定する場合rangeObject.min = numberここで、numberはスライダーコントロールに設定する最小値を表します。minプロパティの値を取得する場合rangeO

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

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