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

JavaScriptの範囲オーバーフロー・範囲アンダーフロー（rangeOverflow／rangeUnderflow）プロパティの使い方

rangeOverflow・rangeUnderflowプロパティとは

JavaScriptでは、フォーム要素の validity プロパティ（ValidityStateオブジェクト）を利用することで、ユーザーが入力した値が条件を満たしているかどうかを簡単に検証できます。この中には、数値の入力範囲をチェックするための「rangeOverflow」と「rangeUnderflow」という2つのプロパティが用意されています。

Range Underflow（範囲アンダーフロー）

入力要素の値が、min属性で指定された最小値よりも小さい場合、validity.rangeUnderflow は true を返します。

Range Overflow（範囲オーバーフロー）

入力要素の値が、max属性で指定された最大値よりも大きい場合、validity.rangeOverflow は true を返します。

以下は、JavaScriptのrangeOverflowおよびrangeUnderflowプロパティを使用したサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Range Overflow / Range Underflow デモ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Range Overflow と Range Underflow プロパティ</h1>
0〜20までの数値を入力してください<input type="number" class="num" min="0" max="20" step="1">
<button class="Btn">チェック</button>
<h3>
上のボタンをクリックすると、入力した数値が0〜20の範囲内かどうかを確認できます。
</h3>
<div style="color: green;" class="result"></div>
<script>
    let resEle = document.querySelector(".result");
    let numEle = document.querySelector('.num');
    document.querySelector(".Btn").addEventListener("click", () => {
        if(numEle.validity.rangeOverflow){
            resEle.innerHTML = '数値が範囲を超えています';
        }
        else if(numEle.validity.rangeUnderflow){
            resEle.innerHTML = '数値が範囲を下回っています';
        }
        else{
            resEle.innerHTML = '数値は範囲内です';
        }
    });
</script>
</body>
</html>

実行結果

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

JavaScriptの範囲オーバーフロー・範囲アンダーフロー（rangeOverflow／rangeUnderflow）プロパティの使い方

20を超える数値を入力した場合：

JavaScriptの範囲オーバーフロー・範囲アンダーフロー（rangeOverflow／rangeUnderflow）プロパティの使い方

0未満の数値を入力した場合：

JavaScriptの範囲オーバーフロー・範囲アンダーフロー（rangeOverflow／rangeUnderflow）プロパティの使い方

まとめ

rangeOverflowとrangeUnderflowを活用すれば、min属性・max属性で定義した範囲から外れた入力値を簡単に検出できます。これらのプロパティは、フォーム送信前のリアルタイムバリデーションなど、ユーザビリティの高いWebフォームを実装する際に非常に役立ちます。

  1. JavaScriptのwindow.innerWidth・innerHeightプロパティとは？使い方をわかりやすく解説

    JavaScriptのwindow.innerWidthプロパティはブラウザウィンドウのコンテンツ領域（ビューポート）の幅を、window.innerHeightプロパティはコンテンツ領域の高さをそれぞれピクセル単位で取得します。スクロールバーやツールバーなど、ブラウザUIの一部は含まれず、あくまでページが表示されている領域のサイズが返される点に注意しましょう。 これらのプロパティは、レスポンシブ対応の処理や要素の動的な配置計算など、ウィンドウサイズに応じた挙動を実装したい場合に非常に便利です。 window.innerWidthとinnerHeightのサンプルコード 以下は、ボタンをクリッ

  2. JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

    JavaScriptでは、オブジェクトのprototypeプロパティに値を追加することで、プロパティを複数のインスタンス間で共有できます。prototypeに登録されたプロパティは、そのコンストラクタから生成されたすべてのインスタンスから共通して参照されます。 この手法には大きなメリットがあります。各インスタンスごとに同じ値のプロパティを個別に定義する必要がないため、コードの重複を減らし、メモリの使用量も抑えられるのです。たとえば、学校名のように全生徒で共通する情報は、prototypeにまとめておくのが理想的です。 実装例：prototypeでプロパティを共有するコード 以下は、JavaS