たった11行で郵便番号から住所を自動表示させるスクリプト（おまけでハイフンの自動挿入ほか）

（2020年12月8日追記）
この記事で紹介しているスクリプトが動かなくなってしまったので、別のAPIを利用したNEW版を作りました！

あわせて読みたい

「11行で郵便番号から住所を自動表示させる」が生まれ変わりました！ できた！ さしあたり！ $(document).on('keyup change', '[name="yuubin"]', function(e){ if(!([8, 46].includes(e.keyCode))){ let _val =...

採用サイトでもよく使われる定番機能「郵便番号から住所を自動表示」ですが、Googleしごと検索対応においては、募集要項ページを生成するためのCMS管理画面内で、とても便利です。

なにせGoogleしごと検索は、必要なプロパティ（項目）としてそのものずばり「郵便番号」を求めてくるほか、住所を「都道府県」「市区町村」「丁目番地」などに細かく分けて提供するよう求めていて、どうにも面倒。手入力じゃ手間だし、誤入力のリスクも付きまとう。
そんな中「郵便番号から住所を自動表示」は、これらを一挙に解決してくれるからです。

ただ、検索で見つけられる方法だとやれナントカJSを読み込めとか、フォーム部品にIDを付けろとかちょっと注文多め。しかもたいてい入力欄自体の使い勝手については詰めが甘かったりして、結局あちこち手を入れる必要がありイマイチ。という訳で、今さらですが自分でまとめてみました。

で、出来たのがこちら↓

$(document).on('keyup change', '[name="郵便番号"]', function(e){
  if(!([8, 46].includes(e.keyCode))){
    let _val = $(this).val().replace(/[^0-9]/g, '');
    if(_val.length > 2) _val = _val.slice(0, 3) + '-' + _val.slice(3, 7);
    $(this).val(_val);
    $.getJSON('https://api.zipaddress.net?callback=?', {'zipcode': _val}, function(json){
      $('[name="都道府県"]').val(json.pref);
      $('[name="市区町村"]').val(json.address);
    });
  }
});

11行にまとまりました。
jQuery本体読み込みの記述に続けて、HTML中の<script></script>内か、読み込ませるJSファイル内に記述してやればよし。
なお、WordPressの管理画面内で利用する場合は、functions.php内にこんな感じで記述します↓ （「適用する投稿タイプのスラッグ」の記述はよきように。）

function my_print_footer_scripts() { ?>
  global $post_type;
  if ($post_type == '適用する投稿タイプのスラッグ'): ?>
  <script type="text/javascript">
    $(document).on('keyup change', '[name="郵便番号"]', function(e){
      if(!([8, 46].includes(e.keyCode))){
        let _val = $(this).val().replace(/[^0-9]/g, '');
        if(_val.length > 2) _val = _val.slice(0, 3) + '-' + _val.slice(3, 7);
        $(this).val(_val);
        $.getJSON('https://api.zipaddress.net?callback=?', {'zipcode': _val}, function(json){
          $('[name="都道府県"]').val(json.pref);
          $('[name="市区町村"]').val(json.address);
        });
      }
    });
  </script>
  <?php
  endif;
}
add_action('admin_print_footer_scripts', 'my_print_footer_scripts', 21);

あとは、反映先を適切に書き換えてやります。

反映先の書き換え

検索で見つかるTipsやプラグインなんかだと、よく『住所を反映させたい要素にid=”◯◯”を書け』的な指示があるんですが、例えばプラグインで動的に出力してるフォームだと柔軟に加工ができなかったり、idって同一ページ内に一個しか使用できないので、その辺の縛りで不具合が出たりする。
という訳で、今回はHTMLには新たな記述はせず、セレクタを利用して要素指定をします。これなら作業も最小限、縛りも受けません。

住所を反映させる要素の指定には、name属性

フォーム部品である反映先の要素には、通常、属性値が一意のname属性が付けられます。それを利用し、以下3箇所を各name属性の属性値に書き換えます。

• “郵便番号”を、郵便番号を入力する要素のname属性値に
• “都道府県”を、都道府県を反映させたい要素のname属性値に
• “市区町村”を、市区町村を反映させたい要素のname属性値に

上記3箇所を書き換えて実装は完了。これで動くはずです。

ちなみに、複数のform要素がある場合など属性値が一意じゃないケースでも、セレクタを工夫してやることで要素の絞り込みは可能です。
セレクタについてはすでにあちこちで記事が書かれてますので、ぜひそのあたりをご参考に。

STAND-4U

【保存版】CSSのセレクタの完全ガイド！ 初心者用にCSSのセレクタをわかりやすく説明してほしい！今回はそんな君にCSSのセレクタを超絶わかりやすく説明しよう！「セレクタを制するものはCSSを制する」といっても...

という訳で、例えばこんな感じに書きます

もとのHTMLがこんな内容↓なら、

<form>
  郵便番号　<input type="text" name="yuubin"><br>
  都道府県　<input type="text" name="todoufuken"><br>
  市区町村　<input type="text" name="shikuchouson">
</form>

スクリプトの方はこんなふうに↓加工。

$(document).on('keyup change', '[name="yuubin"]', function(e){
  if(!([8, 46].includes(e.keyCode))){
    let _val = $(this).val().replace(/[^0-9]/g, '');
    if(_val.length > 2) _val = _val.slice(0, 3) + '-' + _val.slice(3, 7);
    $(this).val(_val);
    $.getJSON('https://api.zipaddress.net?callback=?', {'zipcode': _val}, function(json){
      $('[name="todoufuken"]').val(json.pref);
      $('[name="shikuchouson"]').val(json.address);
    });
  }
});

3箇所ある[name=”●”]を、HTMLに合わせて書き換えただけです。HTMLもスクリプトも、これ以外は無加工でOK。色々いじるとそのぶん書き間違いによるエラーの原因になるので、手数は少ないに越したことはありません。

おまけの入力補助機能

しょっちゅう見かける郵便番号入力欄ですが、使い勝手に関しては、個人的にはモヤっとすることがしばしば。なんかこう、もうちょっと配慮して欲しいな、みたいな…

一番多いのは、「123-4567」とかをそのままをコピペしたいのに、入力欄が分かれてるケース↓

冷静に考えて、分かれてるメリットってなんなんでしょ？

他には、いろいろ注文つけてくるケース↓

こっちに注文つけるより先に、まずはそちらでなんとかして欲しい。

あとハイフンの要不要について明言されていないと、入力時にちょっと迷ったりしますよね。で、『有りにしとけばいいかな？』とか思って進めてると

オウ…

そんな目くじら立てるほどのことはないんでしょうが、ユーザーの離脱を少しでも抑えたり、クライアントの日々の作業を楽にして差し上げたいと思うなら、工夫したいところ。
今回のスクリプトでは、その辺りの使い勝手についてもカスタマイズしています。

1. 半角数字以外を弾く

let _val = $(this).val().replace(/[^0-9]/g, '');

全角数字も含め、半角数字以外の入力を弾きます（すでにハイフンが含められている場合はそれも一旦削除し、整形）。

2. ハイフンを自動挿入、9字目以降は削除

if(_val.length > 2) _val = _val.slice(0, 3) + '-' + _val.slice(3, 7);

4文字目に「-（ハイフン）」を自動挿入し、9文字以降の文字を削除。

これらが文字をタイプしたタイミングと、コピペなどにより数値が入力（変更）されたタイミングで行われます。結果として形式が整えられ、ハイフンの自動挿入もされるので要不要を気にする必要なし。
という訳で実際に動かしたものが、こちら↓

See the Pen 郵便番号から住所を自動表示させる by PieceDesignInc. (@xyyyyxww) on CodePen.

注意書きなどで無用なプレッシャーをかけることもない、スマートな入力欄にまとまりました。

2020年12月8日追記

このスクリプトが利用してるAPI（https://api.zipaddress.net/）が、セキュリティ上の問題で利用できなくなってますね。あらま…。
ざっと探してみたところ同様の動作をするAPIは見つけられましたが↓、クロスドメインでは使えないみたい。う〜ん。

（貼ってもしょうがないけど一応）

実際のところ大変困る…！　大急ぎで対処！