html 超简単！たった2行だけで邮便番号から住所自动表示する方法

Posted 2021-05-10

<!-- ajaxzip3.jsの読み込み -->
  <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

<!-- 郵便番号を一つの入力フィールドにする場合 -->
  <!-- ▼郵便番号入力フィールド(7桁) -->
  <input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
  <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
  <input type="text" name="addr11" size="60">

<!-- 郵便番号を一つの入力フィールド(7桁)で入力してもらい、住所は都道府県とそれ以降の二つの入力フィールドで表示する場合のコードです。 -->
  <!-- ▼郵便番号入力フィールド(7桁) -->
  <input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
  <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
  <input type="text" name="addr11" size="60">
  
<!-- 郵便番号を二つの入力フィールドにする場合 -->
  <!-- ▼郵便番号入力フィールド(3桁+4桁) -->
  <input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');">
  <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
  <input type="text" name="addr21" size="40">
  
<!-- 郵便番号を二つの入力フィールド(3桁+4桁)で入力してもらい、住所は都道府県とそれ以降の二つの入力フィールドで表示する場合のコードです。 -->
  <!-- ▼郵便番号入力フィールド(3桁+4桁) -->
  <input type="text" name="zip31" size="4" maxlength="3"> － <input type="text" name="zip32" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','addr31');">
  <!-- ▼住所入力フィールド(都道府県) -->
  <input type="text" name="pref31" size="20">
  <!-- ▼住所入力フィールド(都道府県以降の住所) -->
  <input type="text" name="addr31" size="40">