[JavaScript] 電話番号に自動でハイフンをつけたい（libphonenumber-js使用）

公開日:2024/07/03

お問い合わせフォームの入力内容を、CRMなど外部のツールと連携させる場合、電話番号の入力形式をハイフンがついたもので揃えたいといった場合があります。

本記事では、Googleから提供されているライブラリ「libphonenumber-js」を使った電話番号の自動修正について紹介します。

ライブラリのインポート

<script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.11.4/libphonenumber-js.min.js"></script>

headタグ内に上記コードを記載してライブラリをインポートします。

電話番号の修正処理

document.addEventListener('DOMContentLoaded', function() {
    const telInputs = document.querySelectorAll('input[type="tel"]');

    telInputs.forEach(function(input) {
        input.addEventListener('blur', function(event) {
            event.target.value = new libphonenumber.AsYouType('JP').input(event.target.value);
        });
    });
}, false);

ページ内にある電話番号の入力項目を取得し、ループを回し、「blur」イベントが発生した際の処理を登録します。

「blur」は入力項目へのフォーカスが外れたときに発火するイベントです。
入力が完了したあとに内容をライブラリの関数を実行して、ハイフン付きの電話番号に変換しています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。