iOS・Safari, FireFoxなどで、input type=numberの数値だけの入力制約が効かない時の解決方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、iOS・Safari, FireFoxなどで、input type=numberの数値だけの入力制約が効かない時の解決方法について解説していきます。

1 input type=numberの数値だけの入力制約が効かない時の解決方法
- 1.1 pattern 属性とoninputイベントを使用して、数値以外の文字を入力できないように制限する
- 1.2 SampleCode全文
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

input type=numberの数値だけの入力制約が効かない時の解決方法

iOS・Safari, FireFoxなど、ブラウザやOSによっては、input type=numberによる数値だけの入力制約がサポートされておらず、アルファベットなどの文字列が入力可能な場合があります。

詳細は次の記事をご参照ください。

意外と知られていないtype=”number”入力欄の5つの問題点

こういった問題に対応するためには、いくつか手段がありますが、

今回はinput type=number の Inputパターンの指定 & 入力をCheckするバリデーションを追加して対応する方法をご紹介します。

pattern 属性とoninputイベントを使用して、数値以外の文字を入力できないように制限する

この例ではpattern 属性とoninputイベントを使用して、数値以外の文字を入力できないように制限しています。

  <input
    type="number"
    id="number-input"
    pattern="[0-9]*"
    oninput="this.value = this.value.replace(/[^0-9]/g, '');"
  />

oninputのような DOMのイベントハンドラについては、以前に説明しています。

【JavaScript】DOMで取得した要素にイベントハンドラを登録する方法(onclick, ondblclick, oncontextmenu)

SampleCode全文

Test用のSamplecode全文は、次のとおりです。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NumberInput_Test</title>
  </head>
  <body>
    <!-- oninput の this は、input自身を指す -->
    <input
      type="number"
      id="number-input"
      pattern="[0-9]*"
      oninput="this.value = this.value.replace(/[^0-9]/g, '');"
    />
  </body>
  <script>
    const numberInput = document.getElementById("number-input");
    console.log("numberInput", numberInput);
    console.log("numberInput.oninput", numberInput.oninput);

    // onChange_Eventで、入力値をCheckする
    numberInput.onchange = () => {
      const inputValue = numberInput.value;
      console.log("inputValue", inputValue);
    };
  </script>
</html>