フォームで、半角数字の入力のみの規制をする関数

茨城県水戸市にホームページを作ったり、修理したり、する。どちらかと言えば修理屋さんのレターズです。

賛否両論あるとは思いますが、クライアントさんからたまに要望のある、フォームで、半角数字の入力のみの規制をするということ。

ユーザー側からすると、便利なようで、一瞬他の（数字以外の）キーが効かなくなるので戸惑うこともあるかもしれません。　

下記がその関数です。規制したいinputにnumber-onlyクラスをつけてください。

const inputs = document.querySelectorAll('.number-only');

  inputs.forEach(input => {
    input.addEventListener('input', function () {
      // Convert full-width numbers to half-width
      let converted = this.value.replace(/[０-９]/g, ch =>
        String.fromCharCode(ch.charCodeAt(0) - 0xFEE0)
      );

      // Remove non-digit characters
      converted = converted.replace(/\D/g, '');

      // Update input value
      this.value = converted;
    });
  });