【JavaScript】入力された電話番号に自動でハイフンを追加するTips

JavaScript

2022年08月02日2024年02月20日

電話番号のハイフン入力が必須のフォームで
ハイフンの入れ忘れが多くて困ってる、との相談が。
人間は忘れる生き物なので、そらそうだ。
それならハイフンを自動で追加することはできないものか？

と思い、作成しました。
紹介するコードをコピペで使えますので、参考にしてみてください！

ライブラリ『libphonenumber』
サンプル
解説
1. HTML
2. JavaScript
まとめ

ライブラリ『libphonenumber』

まず今回、Googleが提供しているlibphonenumberというライブラリを使います。
libphonenumberのGitHubページでは、こんな風に紹介されています。

Google’s libphonenumber is a library that parses, formats, stores and validates international phone numbers. It is used by Android since version 4.0 and is a phenomenal repository of carrier metadata.
https://github.com/ruimarinho/google-libphonenumber

これを（英語できないので）Google翻訳で訳してみると
「Googleのlibphonenumberは、国際電話番号を解析、フォーマット、保存、検証するライブラリです。バージョン4.0以降Androidで使用されており、キャリアメタデータの驚異的なリポジトリです。」
とのこと。

電話番号って、国によって規格が違ったり
日本国内だけでも局番の桁数が違ったり、と様々な決め事が存在するので
それを個人でイチから全て網羅するのは大変です。
libphonenumberはその辺の問題をクリアにしてくれる素晴らしいライブラリなので、今回はこちらを使用します。

サンプル

サンプルとして、下のようなフォームを用意しました。

サンプルなのでフォームの送信はできませんが、
このフォームの電話番号がハイフン必須、という想定です。

サンプルページを作ったので試してみてください。
電話番号をハイフンなしで入力しても、
他の入力欄に移動すると勝手にハイフンがつく仕様になっています。

サンプルページ

解説

HTML

HTMLの方は、なんてことない普通のフォームです。

<form>
    <div>
        <label for="name">名前</label>
        <input type="text" name="namae" id="name">
    </div>
    <div>
        <label for="tel">電話番号</label>
        <input type="text" name="tel" id="tel">
    </div>
    <div>
        <label for="mail">メールアドレス</label>
        <input type="text" name="mail" id="mail">
    </div>
    <div>
        <label for="message">ご用件</label>
        <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </div>
    <button type="submit">送信</button>
</form>

<form>

<div>

</div>

<div>

</div>

<div>

<label for="mail">メールアドレス</label>

</div>

<div>

</div>

</form>

JavaScript

そして、先に紹介したlibphonenumberを読み込みます。

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

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

libphonenumberを読み込んだ後に、下記の記述を加えてください。

window.addEventListener("load",function(){
  const inputTel = document.getElementById('tel');//＝電話番号の入力欄
  if (!inputTel){ return false;}
  //電話番号の入力欄から離れたら発動
  inputTel.addEventListener('blur', () =&gt; {
    // バリデーション関数
    let validateTelNeo = function (value) {
      return /^[0０]/.test(value) &amp;&amp; libphonenumber.isValidNumber(value, 'JP');
    }

    // 整形関数
    let formatTel = function (value) {
      return new libphonenumber.AsYouType('JP').input(value);
    }

    const postdata = inputTel.value;//入力した電話番号を取得
    //入力した内容がバリデーションに引っかかったときはエラー
    if (!validateTelNeo(postdata)) {
      console.log('ERROR')
      return
    }
    let formattedTel = formatTel(postdata);//入力した電話番号を整形
    console.log(formattedTel);
    inputTel.value = formattedTel;//整形した電話番号を入力欄に返す
  });
});

window.addEventListener("load",function(){

const inputTel = document.getElementById('tel');//＝電話番号の入力欄

if (!inputTel){ return false;}

//電話番号の入力欄から離れたら発動

inputTel.addEventListener('blur', () => {

// バリデーション関数

let validateTelNeo = function (value) {

return /^[0０]/.test(value) && libphonenumber.isValidNumber(value, 'JP');

}

// 整形関数

let formatTel = function (value) {

return new libphonenumber.AsYouType('JP').input(value);

}

const postdata = inputTel.value;//入力した電話番号を取得

//入力した内容がバリデーションに引っかかったときはエラー

if (!validateTelNeo(postdata)) {

console.log('ERROR')

return

}

let formattedTel = formatTel(postdata);//入力した電話番号を整形

console.log(formattedTel);

inputTel.value = formattedTel;//整形した電話番号を入力欄に返す

});

ハイフンがない場合だけでなく
ハイフンの位置がおかしなときも修正してくれますし、
全角数字で入力されたものを半角にも直してくれます。優秀！

まとめ

ということで、電話番号に自動でハイフンを追加するTipsをご紹介しました。

実装するにあたり下記のページを参考にさせていただきました。
ありがとうございます。