郵便番号から住所入力するjQueryプラグイン
HTML JavaScript Other
Clone or download
Permalink
Failed to load latest commit information.
json update postal data of 2018-06-29 Jul 1, 2018
selenium testcase修正 Dec 22, 2017
test testcase修正 Dec 22, 2017
test_npm github #20 selectのvalueセット時trigger作動 Dec 22, 2017
.gitignore github #19 npmモジュールの公開について Dec 21, 2017
README.txt github #21 README.txt:「npm 使用例」のパッケージ名の TYPO Jan 5, 2018
build.properties ant build.property Feb 2, 2017
build.xml github #20 selectのvalueセット時trigger作動 Dec 22, 2017
favicon.ico favicon.ico Dec 2, 2016
index.html github #13: 都道府県のvalueが数値の場合に対応したい Dec 31, 2015
is_test_passed.sh ant build.xml Feb 2, 2017
jquery.jpostal.js gihub #18 全角カナで表示したい Dec 22, 2017
js_test.sh ant build.xml Feb 2, 2017
package.json update postal data of 2018-06-29 Jul 1, 2018
robots.txt add robots.txt Dec 2, 2016
sample.css 公開サーバ jpostal.googlecode.com Jul 3, 2014
sample_1.html testcase修正 Dec 22, 2017
sample_1_b.html selenium testcase Dec 31, 2015
sample_2.html Google App Engine : jpostal-1006.appspot.com/jquery.jpostal.js Jul 18, 2015
sample_3.html Google App Engine : jpostal-1006.appspot.com/jquery.jpostal.js Jul 18, 2015
sample_6.html Google App Engine : jpostal-1006.appspot.com/jquery.jpostal.js Jul 18, 2015
sample_7.html Google App Engine : jpostal-1006.appspot.com/jquery.jpostal.js Jul 18, 2015
sample_8.html testcase修正 Dec 22, 2017
version.txt ver/2.11.0 Dec 22, 2017

README.txt

jquery.jpostal.js
=================
Copyright 2014, Aoki Makoto, Ninton G.K. http://www.ninton.co.jp

Released under the MIT license - http://en.wikipedia.org/wiki/MIT_License

Requirements
jquery.js

郵便番号を入力すると住所欄へ自動入力するjQueryプラグインです。
jpostal-1006.appspot.comで公開していますので、jquery.jpostal.jsやjson/*.jsonを設置する必要がありません。
サイト運営者の定期的な郵便データ更新作業も必要ありません。

npmで、jquery-jpostal-jaとして公開しました。
npmでの使い方は最後。

都道府県をSELECTタグで表示する場合、OPTIONタグのvalueは次のどれでもかまいません。
<option value="北海道">北海道</option>
<option value="1">北海道</option>
<option value="01">北海道</option>

--------------------------------------------------
使用例
--------------------------------------------------
(sample_1.html)

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
	$('#postcode1').jpostal({
		postcode : [
			'#postcode1',
			'#postcode2'
		],
		address : {
			'#address1'  : '%3',
			'#address2'  : '%4',
			'#address3'  : '%5'
		}
	});
});

--------------------------------------------------
設置方法A
--------------------------------------------------
1. 住所入力フォームにjquery本体とjquery.jpostal.jsをインクルードしてください。

  例
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

2. jpostalプラグイン呼び出しを記述してください。

2-1. .jpostalを指定するセレクタ

$('#postcode1').jpostal({

	郵便番号欄のセレクタを指定してください。
	郵便番号欄が2個の場合は、最初の1個だけを指定してください。
	DOM idを設定していたほうが指定が簡単です。

	例1
	<input id="postcode1_1" name="postcode1" />
	$('#postcode1_1').jpostal({

	例2
	DOM idなしの場合
	<input name="postcode1" />
	$('[name=postcode1]').jpostal({

2-2. 引数

postcode	郵便番号欄
	郵便番号欄セレクタの配列
	
	例1
	郵便番号欄が1個
	postcode : [
		'#postcode'
	]

	例2
	郵便番号欄が2個
	postcode : [
		'#postcode1',
		'#postcode2'
	]
			
address		住所欄
	住所欄セレクタと入力項目フォーマットの連想配列

	入力項目フォーマット
	%3	都道府県
	%4	市区町村
	%5	町域
	%6	大口事業所の番地
	%7	大口事業所の名称
	%8	都道府県カナ
	%9	市区町村カナ
	%10	町域カナ(予定)
	
	例1
	都道府県欄、住所欄の2個
	address : {
		'#prefecture'  : '%3',
		'#address'     : '%4%5',
	}

	例2
	都道府県欄、住所欄、番地欄の3個
	address : {
		'#prefecture'  : '%3',
		'#address1'    : '%4',
		'#address2'    : '%5',
	}

--------------------------------------------------
設置方法B
ご自分のサーバに郵便データを設置する場合
--------------------------------------------------
1. jquery.jpostal.jsをサーバに設置してください。

  アップロード先は任意です。
  htmlフォームと違うサーバも可能です。
  アップロード先の例1  js/jpostal/jquery.jpostal.js
  アップロード先の例2  js/jquery.jpostal.js
  
2. json/*.json をサーバにアップロードしてください。

  アップロード先は任意です。
  jquery.jpostal.jsとの相対関係はありません。
  htmlフォーム、jquery.jpostal.jsと違うサーバでもかまいません。
  アップロード先の例1  js/jpostal/json/*.json
  アップロード先の例2  js/json/*.json

3. 住所入力フォームにjquery本体とjquery.jpostal.jsをインクルードしてください。

  例
  <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>

4. jpostalプラグイン呼び出しを記述してください。

4-1. .jpostalを指定するセレクタ

$('#postcode1').jpostal({

	郵便番号欄のセレクタを指定してください。
	郵便番号欄が2個の場合は、最初の1個だけを指定してください。
	DOM idを設定していたほうが指定が簡単です。

	例1
	<input id="postcode1_1" name="postcode1" />
	$('#postcode1_1').jpostal({

	例2
	DOM idなしの場合
	<input name="postcode1" />
	$('[name=postcode1]').jpostal({

4-2. 引数

postcode	郵便番号欄
	郵便番号欄セレクタの配列
	
	例1
	郵便番号欄が1個
	postcode : [
		'#postcode'
	]

	例2
	郵便番号欄が2個
	postcode : [
		'#postcode1',
		'#postcode2'
	]
			
address		住所欄
	住所欄セレクタと入力項目フォーマットの連想配列

	入力項目フォーマット
	%3	都道府県
	%4	市区町村
	%5	町域
	%6	大口事業所の番地
	%7	大口事業所の名称
	%8	都道府県カナ
	%9	市区町村カナ
	%10	町域カナ(予定)
	
	例1
	都道府県欄、住所欄の2個
	address : {
		'#prefecture'  : '%3',
		'#address'     : '%4%5',
	}

	例2
	都道府県欄、住所欄、番地欄の3個
	address : {
		'#prefecture'  : '%3',
		'#address1'    : '%4',
		'#address2'    : '%5',
	}

url		json/*.jsonのURL
	住所フォームからjson/*.jsonへの相対URLまたは絶対URL。
	http用、https用を指定してください。

	例1
	url : {
		'http'  : 'json/',
		'https' : 'json/'
	}

	例2
	url : {
		'http'  : 'http://www.example.jp/json/',
		'https' : 'https://ssl.example.jp/mysite/json/'
	}

	例3
	http、https どちらも同じホストとパスの場合
	url : {
		'http'  : '//www.example.jp/json/',
		'https' : '//www.example.jp/json/'
	}

--------------------------------------------------
npm 使用例
--------------------------------------------------

サンプルファイル
test_npm/sample_1.html
test_npm/src/main.js

プロジェクトディレクトリで、jqueryとjquery-jpostal-jaをインストールしてください。
jquery-jpostal-jaをinstallしただけでは、jqueryを自動installされませんので、明示的にjqueryをinstallしてください。

$ npm install jqeury
$ npm install jquery-jpostal-ja

main.jsの例

$ = require('jquery');
require('jquery-jpostal-ja');

$(window).ready( function() {

    $('#postcode1').jpostal({   
        postcode : [
            '#postcode1',
            '#postcode2'
        ],
        address : {
            '#address1'  : '%3',
            '#address2'  : '%4',
            '#address3'  : '%5',
            '#address1_kana'  : '%8',
            '#address2_kana'  : '%9',
            '#address3_kana'  : '%10'
        }
    });
});


htmlの例

<script type="text/javascript" src="build/build.js"></script>


ビルドの例

$ browserify src/main.js -o build/build.js