設置が簡単なのでおすすめです。住所データも自動更新。
https://github.com/ninton/jquery.jpostal.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jpostal.js"></script>
$('#postcode1').jpostal({
postcode : [
'#postcode1', // 郵便番号 前3桁
'#postcode2' // 郵便番号 後4桁
],
address : {
'#address1' : '%3', // 都道府県
'#address2' : '%4', //住所1
'#address3' : '%5' // 住所2
}
});
です。とても簡単ですね。
HTMLは次のように準備します。
郵便番号 : <input type="text" name="postcode1" id="postcode1" > - <input type="text" name="postcode2" id="postcode2" >
都道府県 : <input type="text" name="address1" id="address1" >
住所1 : <input type="text" name="address2" id="address2" >
住所2 : <input type="text" name="address3" id="address3" >
「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力するには、
<button id="btn_post" type="button">郵便番号から住所を自動入力</button>
というボタンを設置して
$(document).ready(function() {
$('#btn_post').jpostal({
click : '#btn_post',
postcode : [
'#zip_code'
],
address : {
'#prefecture_name': '%3',
'#addr_name' : '%4%5'
}
});
});
という風に呼び出します。
moji.js を使用して次のようにします。
https://github.com/niwaringo/moji
<script src="./js/moji.js"></script>
<script type="text/javascript">
$("#zip_code").keyup(function(){
var str = $(this).val();
var han = moji(str).convert("ZEtoHE").toString();
$(this).val(han);
});
</script>
郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。
https://github.com/ajaxzip3/ajaxzip3.github.io
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
正規表現で郵便番号が7桁入力された時に検索を実行するようにします。 【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると 【name=prefecture】のドロップダウンリスト 【name=address】の1行テキストに住所が反映されます。 ■ HTMLの1行テキストを下記のように修正
<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />
■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)
<script>
var postal_name = '';
function check_zip( _this ){
if ( postal_name != _this.value ){
AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
postal_name = _this.value;
}
}
</script>
これだけです。