HTMLで電話番号をマスクする方法

フォーマット指定: HTMLのinput要素を使用し、pattern属性を設定して特定のフォーマットに従うように制約をかけることができます。例えば、電話番号の形式が「XXX-XXXX-XXXX」である場合、以下のようにコードを記述します。

<input type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="XXX-XXXX-XXXX" required>

この方法では、入力時に自動的にハイフンが挿入され、正しいフォーマットで入力されているかどうかを確認できます。

JavaScriptを使用したマスキング: JavaScriptを使って、入力された電話番号をマスクすることもできます。以下に例を示します。

<input type="text" id="phoneInput" placeholder="XXX-XXXX-XXXX" oninput="maskPhoneNumber(this)">
<script>
  function maskPhoneNumber(input) {
    let phoneNumber = input.value.replace(/\D/g, '');
    let formattedNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
    input.value = formattedNumber;
  }
</script>

この方法では、入力されたテキストが自動的にマスクされ、ハイフンが挿入されます。

CSSの擬似要素を使用したマスキング: CSSの擬似要素を使用して、電話番号のマスキングを行うこともできます。以下に例を示します。

<style>
  .masked-phone::after {
    content: attr(data-phone);
    unicode-bidi: bidi-override;
    direction: rtl;
  }
</style>
<span class="masked-phone" data-phone="XXX-XXXX-XXXX"></span>

この方法では、data-phone属性に電話番号を指定し、擬似要素(::after)を使用して表示します。テキストの方向をrtlに設定することで、テキストが左右逆さまに表示され、マスキングされたように見えます。

これらはいくつかの一般的な方法ですが、他にもさまざまなアプローチがあります。使用するコンテキストや要件に応じて、最適な方法を選択してください。