もくじ
ajaxzip3を読み込む
ダウンロードする場合
https://github.com/ajaxzip3/ajaxzip3.github.ioから、【ajaxzip3.js】というファイルをダウンロードして設置します。
<script type="text/javascript" src="js/ajaxzip3.js"></script>
CDNを使用する場合
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
jQueryも使用する場合
入力後のフォーカスする場所を変更するのに、jQueryを使用する場合はjQueryも読込みます。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"</script>
記事を取得できませんでした。記事IDをご確認ください。
記事を取得できませんでした。記事IDをご確認ください。
郵便番号と住所のみ
<form>
<label>郵便番号(ハイフンもOK)</label>
<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr01','addr01');">
<label>都道府県と以降の住所</label>
<input type="text" name="addr01" size="40">
</form>
デモ
都道府県とそれ以降に分ける場合
<form>
<label>郵便番号(ハイフンもOK)</label>
<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
<label>都道府県</label>
<input type="text" name="pref01" size="20">
<label>以降の住所</label>
<input type="text" name="addr01" size="40">
</form>
デモ
都道府県・市区町村・それ以降に分ける場合
<form>
<label>郵便番号(ハイフンもOK)</label>
<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr('zip01','','pref01','addr01','strt01');">
<label>都道府県</label>
<input type="text" name="pref01" size="20">
<label>市区町村</label>
<input type="text" name="addr01" size="20">
<label>以降の住所</label>
<input type="text" name="strt01" size="40">
</form>
デモ
郵便番号を3桁と4桁に分ける場合
<form>
<label>郵便番号(3桁と4桁)</label>
<input type="text" name="zip01" size="4" maxlength="3">
<input type="text" name="zip02" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip01','zip02','addr01','addr01');">
<label>住所</label>
<input type="text" name="addr01" size="40">
</form>
デモ
フォーカスを変える
zip2addrの第7引数に自動フォーカスするためのフラグがあるようです。第7引数をfalseに設定すると、自動フォーカス機能が切れます。
AjaxZip3.zip2addr(this,'','pref01','addr01', '', '', false);
jQueryで記述する場合
onSuccess(住所取得に成功した時)
AjaxZip3.onSuccess = function() {
$('input[name=banchi]').focus();
};
onFailure(住所取得に失敗した時)
AjaxZip3.onFailure = function() {
alert('郵便番号に該当する住所が見つかりません');
};
