2012-06-16

javascriptで郵便番号から住所に変換するにはajaxzip3が便利

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
javascriptで郵便番号から住所に変換するには、ajaxzip3が便利です。

郵便番号から住所に変換するときに面倒なのが郵便番号情報のメンテナンスなのですが、
これをおまかせしておくことができるのがステキなのです。

詳しくは以下を見てください。
https://github.com/ajaxzip3/ajaxzip3.github.io

実装のサンプルも以下にあります。
https://ajaxzip3.github.io/sample-page/

こちらのサンプルのように、郵便番号欄を以下のように書くことだけで実装できるのです。
<input type="text" name="zip01" onkeyup="AjaxZip3.zip2addr(this,'','pref01','addr01');">

これだけでとても簡単です。
上記の例だと郵便番号欄に郵便番号を入れたら住所に反映されます。
しかし、郵便番号をコピーしておいて、マウスで右クリックで貼り付けた場合、keyupのイベントが発生しないので変換されないのです。これを貼り付けでも動作させるには、単純にイベントを変えればOKです。
<input type="text" name="zip01" onchange="AjaxZip3.zip2addr(this,'','pref01','addr01');">

この場合は、フォーカスが他に移れば変換が行われます。
ただしキーボードで入力したとたん変換されなくてフォーカス移動が必要です。

というわけで、両方のイベントに対応する方法です。
jQueryを利用していることが前提ですが、以下のような感じで両方のイベントに対応できます。

$(function() {
  var addr_handler = function(){
    AjaxZip3.zip2addr('zip01', '', 'pref01', 'addr01');
  };
  $("#zip01").change(addr_handler).keyup(addr_handler);
});

追記:
今は、Yubinbangoというのもあるらしいです。
詳細は、以下で
https://github.com/yubinbango/yubinbango
コメントを投稿