フォームで住所を入力する場面が出てきますが、郵便番号を入力したら住所を途中まで自動入力してくれると大変便利です。そんなjQueryプラグインもいろいろ出回っていますが、簡単に使用できていいなと思った「ajaxzip3」の使い方を書き留めます。

この「ajaxzip3」はjQueryプラグインでなく、javascriptライブラリになるので、jQueryを読み込む必要がありません。詳しい使用方法は公式HPにのっていますので参照してください。 ajaxzip3公式HP

1.サンプル

実際に動作確認できるようにサンプルを作成しました。郵便番号の3桁の数字の後に'-'を入力してもしなくても変換されます。

郵便番号
都道府県
以降の住所

2.サンプルのソースコード

ライブラリ本体「ajaxzip3.js」は、外部から読み込んでいるため、</body>タグの直前で読み込んだ方が表示速度が上がります。


<table>
	<tr>
		<th>郵便番号</th>
		<td>
			<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
		</td>
	</tr>

	<tr>
		<th>都道府県</th>
		<td>
			<input type="text" name="pref01" size="20">
		</td>
	</tr>

	<tr>
		<th>以降の住所</th>
		<td>
			<input type="text" name="addr01" size="60">
		</td>
	</tr>
</table>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

wordpressでも使用できてありがたいです、感謝。