郵便番号を自動入力するjavascript オススメ２つ -ajaxzip3, jquery.j-postal.js

2015-06-192020-05-29

最新のYubinbangoライブラリ

フォーム設置の際、郵便番号を入れると住所を自動入力してくれるのって昨今では当たり前のようにありますね。

実現するのはjavascriptですが、設置が簡単なスクリプトの設置例をまとめ。

ajaxzip3で住所自動入力

※Google Code閉鎖により、ajaxzip3のURL変更が必須です。
　今までどこに設置してたかな～と記憶を辿っております。

ajaxzip3の新URL

Githubに移行されています。
https://github.com/ajaxzip3/ajaxzip3.github.io

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

ajaxzip3 設置例

jquery、prototype.jsは不要になったようです。
スクリプトはutf-8なので、utf-8以外の文字コードで書かれているhtmlに設置する場合は、文字コードの指定が必要です。
<script src="hjaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

郵便番号の入力箇所にonkeyupを指定します。
引数

AjaxZip3.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村', '町域大字', '丁目番地' );

郵便番号＋住所の場合

<form method="post" action="">
    <dl>
      <dt>郵便番号</dt>
      <dd><input type="text" id="zipcode" name="郵便番号" size="8" maxlength="8" onkeyup="AjaxZip3.zip2addr(this,'','ご住所','ご住所');"></dd>
      <dt>ご住所</dt>
      <dd><input type="text" name="ご住所" id="address" class="input-long">
      </dd>
    </dl>
  </form>

 郵便番号３桁＋郵便番号４桁＋住所

<form method="post" action="">
    <dl>
      <dt>郵便番号</dt>
      <dd><input type="text" id="zipcode" name="郵便番号1" size="8" maxlength="3">-<input type="text" id="zipcode2" name="郵便番号2" size="8" maxlength="4" onkeyup="AjaxZip3.zip2addr('郵便番号1','郵便番号2','ご住所','ご住所');"></dd>
      <dt>ご住所</dt>
      <dd><input type="text" name="ご住所" id="address" class="input-long">
      </dd>
    </dl>
  </form>

 jquery.jpostal.jsを使う

https://github.com/ninton/jquery.jpostal.js/

※jquery.jpostal.jsのサンプルページのコードはgooglecode.comになっているので来年１月には使えなります。

こちらも使いやすいです。こちらは郵便番号、住所にIDを設定して設置します。

<form method="post" action="">
    <dl>
      <dt>郵便番号</dt>
      <dd><input type="text" id="zipcode" name="郵便番号" size="8" maxlength="8"></dd>
      <dt>ご住所</dt>
      <dd><input type="text" name="ご住所" id="address" class="input-long">
      </dd>
    </dl>
  </form>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.jpostal.js"></script>
<script>
	$(window).ready( function() {
	$('#zipcode').jpostal({
	postcode : [
		'#zipcode'
		],
		address : {
		'#address'  : '%3%4%5',
		}
	});
});
</script>

郵便番号欄のIDを指定し、下記入力項目に対応した住所入力欄を指定します。

入力項目フォーマット
%3 都道府県
%4 市区町村
%5 町域
%6 大口事業所の番地
%7 大口事業所の名称
%8 都道府県カナ
%9 市区町村カナ
%10 町域カナ(予定)

郵便番号データも自サーバーに設置する場合

*.json　データが郵便番号データ

アップロード先はどこでもOKとのこと。
アップロードした場所を、jpostal.jsの16,17行目にURLに設定します。
URLは絶対パスでも相対パスでもOKのようです。

this.url     = {
    'http'  : '//jpostal.googlecode.com/svn/trunk/json/',
    'https' : '//jpostal.googlecode.com/svn/trunk/json/',
};