JavaScriptで自由自在！input type="number"の入力を完全管理

2024-04-15

HTML5 input type="number" 要素の最大長を設定する方法

maxlength 属性を使用する

最も簡単な方法は、maxlength 属性を <input> 要素に追加することです。これは、ユーザーが入力できる最大文字数を制限します。ただし、maxlength 属性は、入力できる数値の桁数とは関係ありません。つまり、ユーザーは最大 maxlength 個の桁を含む数値を入力できます。

<input type="number" name="age" id="age" maxlength="3">

この例では、ユーザーは最大 3 桁の年齢を入力できます。例えば、123、45、または 100 などの数値は有効ですが、1000 以上の数値は入力できません。

pattern 属性と正規表現を使用する

より厳密な制御が必要な場合は、pattern 属性と正規表現を使用して、入力できる数値の形式を制限することができます。この方法では、最大桁数を間接的に制限することができます。

<input type="number" name="age" id="age" pattern="[0-9]{1,3}">

この例では、正規表現 [0-9]{1,3} を使用して、1 桁から 3 桁までの数字のみを許可しています。スペースやその他の文字は入力できません。

JavaScript を使用する

さらに高度な制御が必要な場合は、JavaScript を使用して、ユーザーが入力した値を検証し、エラーメッセージを表示することができます。

<input type="number" name="age" id="age" oninput="validateAge(this)">

<script>
function validateAge(input) {
  if (input.value.length > 3) {
    alert("最大 3 桁の年齢を入力してください。");
    input.value = input.value.slice(0, 3);
  }
}
</script>

この例では、oninput イベントを使用して、ユーザーが入力するたびに validateAge 関数を呼び出します。この関数は、入力値の長さをチェックし、3 桁を超えている場合はアラートを表示し、値を 3 桁にトリミングします。

補足:

上記の方法は、HTML5 をサポートするブラウザでのみ機能します。古いブラウザでは、ポリフィルが必要になる場合があります。
input type="number" 要素は、スピンボタンを使用して値を上げ下げすることもできます。この機能は、ユーザー入力をさらに制限するために使用できます。
アクセシビリティを考慮する場合は、aria-valuemax 属性を使用して、スピンボタンで選択できる最大値を指定することを検討してください。

これらの方法を組み合わせることで、HTML5 input type="number" 要素の入力内容を詳細に制御することができます。

HTML5 input type="number" 要素の最大長を設定する - サンプルコード

maxlength 属性を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>最大長を設定した数値入力</title>
</head>
<body>
  <form action="#">
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" maxlength="3">
    <button type="submit">送信</button>
  </form>
</body>
</html>

このコードでは、<input type="number"> 要素に maxlength="3" 属性を追加することで、ユーザーが入力できる最大桁数を 3 に制限しています。

pattern 属性と正規表現を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>正規表現で制限した数値入力</title>
</head>
<body>
  <form action="#">
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" pattern="[0-9]{1,3}">
    <button type="submit">送信</button>
  </form>
</body>
</html>

JavaScript を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptで制限した数値入力</title>
</head>
<body>
  <form action="#">
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" oninput="validateAge(this)">
    <button type="submit">送信</button>
  </form>
  <script>
    function validateAge(input) {
      if (input.value.length > 3) {
        alert("最大 3 桁の年齢を入力してください。");
        input.value = input.value.slice(0, 3);
      }
    }
  </script>
</body>
</html>

このコードでは、<input type="number"> 要素に oninput="validateAge(this)" イベントを追加し、JavaScript関数 validateAge を呼び出して、ユーザーが入力するたびに値を検証しています。

この関数は、入力値の長さをチェックし、3 桁を超えている場合はアラートを表示し、値を 3 桁にトリミングします。

HTML5 input type="number" 要素の最大長を設定する - その他の方法

CSS を使用する

CSS の input[type="number"]::-webkit-inner-spin-button セレクタを使用して、スピンボタンの外観をカスタマイズすることができます。この方法は、視覚的に最大値を伝えることができますが、実際に入力できる値を制限するものではありません。

input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
  width: 30px;
  padding: 0;
  background-color: #ccc;
  border: 1px solid #ddd;
  cursor: pointer;
}

input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  width: 0px;
  cursor: default;
}

この CSS コードは、スピンボタンの幅を 30px に設定し、見た目を非表示にします。これにより、ユーザーはスピンボタンを使用して最大 3 桁の値のみを選択できるようになります。

ライブラリを使用する

いくつかの JavaScript ライブラリは、input type="number" 要素に対して追加の機能を提供しており、最大長の制限も含まれている場合があります。

これらのライブラリは、より複雑な機能とカスタマイズオプションを提供する場合がありますが、セットアップと学習に時間がかかる場合があります。

カスタム入力コンポーネントを使用する

高度な制御が必要な場合は、HTML、CSS、JavaScript を使用して独自のカスタム入力コンポーネントを作成することができます。この方法は、完全な柔軟性を提供しますが、時間と労力が必要です。

上記の方法を単独で使用するか、組み合わせて使用することができます。最適な方法は、要件とスキルレベルによって異なります。

注:

上記の CSS コードは、Chrome や Safari などの WebKit ベースのブラウザでのみ機能します。Firefox や Edge などの他のブラウザでは、異なる方法を使用する必要がある場合があります。
カスタム入力コンポーネントを作成する場合は、アクセシビリティのガイドラインを遵守していることを確認してください。

html input numbers