JavaScript入力マスク: ユーザー入力の書式設定とバリデーションの実装方法

1. 正規表現を使用したパターンマッチング: 正規表現を使用して、特定のパターンに一致する入力のみを許可します。例えば、電話番号の形式を制限する場合、以下のように正規表現を使用できます。

   const phoneNumberInput = document.getElementById('phone-number');
   phoneNumberInput.addEventListener('input', function (event) {
    const regex = /^\d{3}-\d{4}-\d{4}$/; // XXXX-XXXX-XXXX形式
    const input = event.target.value;
    if (!regex.test(input)) {
      event.target.setCustomValidity('正しい電話番号を入力してください');
    } else {
      event.target.setCustomValidity('');
    }
   });

2. 入力イベントの監視: 入力イベントを監視し、各入力ごとに特定の制約を適用します。例えば、クレジットカード番号の入力を制限する場合、以下のようにイベントリスナーを使用できます。

   const creditCardInput = document.getElementById('credit-card');
   creditCardInput.addEventListener('input', function (event) {
    const maxLength = 16;
    const input = event.target.value;
    if (input.length > maxLength) {
      event.target.value = input.slice(0, maxLength);
    }
   });

3. 外部ライブラリの使用: 外部のJavaScriptライブラリやフレームワークを使用することもできます。例えば、InputmaskやCleave.jsなどの人気のあるライブラリがあります。これらのライブラリは、入力マスクやバリデーションの機能を簡単に実装するための便利なメソッドやオプションを提供します。

以上の方法は、JavaScriptを使用して入力マスクを実装するための一般的な手法です。必要に応じて、これらの例をカスタマイズして要件に合わせた入力マスク機能を作成することができます。