HTMLでtype="number"を正の数字のみにする：入力エラーを防ぎ、ユーザー体験を向上させる

2024-04-02

HTMLでtype="number"を正の数字のみにする方法

正の数字のみを入力できるようにするには、以下の方法があります。

min属性を使用する

min属性は、入力できる最小値を指定します。この属性に0を指定することで、負の数字を入力できなくなります。

<input type="number" min="0" />

pattern属性は、入力できる値のパターンを正規表現で指定します。以下の正規表現は、正の数字のみを許可します。

<input type="number" pattern="[1-9][0-9]*" />

この正規表現は、以下の条件を満たす値のみを許可します。

最初の文字は1から9までの数字であること

JavaScriptを使用して、入力値が正の数字であるかどうかをチェックすることができます。

<input type="number" id="number" />

<script>
const numberInput = document.getElementById("number");

numberInput.addEventListener("input", () => {
  const value = numberInput.value;

  if (value <= 0) {
    numberInput.setCustomValidity("正の数字を入力してください");
  } else {
    numberInput.setCustomValidity("");
  }
});
</script>

このコードは、numberというIDを持つ入力欄に入力された値をチェックします。

入力値が0以下の場合は、「正の数字を入力してください」というエラーメッセージが表示されます。
入力値が正の数字の場合は、エラーメッセージは表示されません。

上記の3つの方法のいずれかを使用して、HTMLでtype="number"を正の数字のみにすることができます。

シンプルな方法で正の数字のみを入力できるようにしたい場合は、min属性を使用するのがおすすめです。
より複雑なパターンを指定したい場合は、pattern属性を使用します。
入力値のバリデーション処理をより細かく制御したい場合は、JavaScriptを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLでtype="number"を正の数字のみにする方法</title>
</head>
<body>
  <h1>min属性を使用する</h1>
  <input type="number" min="0" />

  <h1>pattern属性を使用する</h1>
  <input type="number" pattern="[1-9][0-9]*" />

  <h1>JavaScriptを使用する</h1>
  <input type="number" id="number" />

  <script>
    const numberInput = document.getElementById("number");

    numberInput.addEventListener("input", () => {
      const value = numberInput.value;

      if (value <= 0) {
        numberInput.setCustomValidity("正の数字を入力してください");
      } else {
        numberInput.setCustomValidity("");
      }
    });
  </script>
</body>
</html>

このコードをブラウザで開くと、以下の3つの入力欄が表示されます。

最初の入力欄は、min属性を使用して、0以上の数字のみを入力できるようにしています。

入力欄に入力して、各方法の動作を確認してみてください。

他の方法

inputmode属性は、入力欄に表示されるキーボードの種類を指定します。

<input type="number" inputmode="numeric" />

numericを指定すると、数字キーのみが表示されるキーボードが表示されます。

ただし、この方法はブラウザによって対応状況が異なるため、注意が必要です。

CSSを使用して、入力欄のスタイルを変更することができます。

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

このコードは、::-webkit-inner-spin-buttonと::-webkit-outer-spin-buttonという疑似要素を使用して、スピンボタンを非表示にします。

ただし、この方法はWebkitベースのブラウザでのみ有効です。

ライブラリを使用する

jQueryなどのライブラリを使用して、入力値のバリデーション処理を行うことができます。

$(function() {
  $("#number").on("input", function() {
    const value = $(this).val();

    if (value <= 0) {
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  });
});