みんな大好きYubinbango.js

GitHub – yubinbango/yubinbango

既存の入力フォームに適当なclass設定し、CDNからライブラリを読み込むために1行htmlに書くだけで、他のライブラリに依存することなく郵便番号から住所を自動的に引っ張ってきてくれるライブラリです。

フォーム内に住所欄が1つだけの場合は、解説に書いてあるとおりに記述すれば動作します。

(･∀･)簡単ですね！幸せか！(･∀･)

…簡単すぎるゆえに、以下の状況で少しハマりました。

1フォーム内に複数の住所欄がある場合

たとえば住所欄が3つあるようなフォーム（3つはやり過ぎだとしても2つはあるでしょう？ｗ）でテストすると、動作が不定になってしまいました(最初の1つでしか動作しなかったり)。

GitHubには複数住所に対応と書かれている

「読み込んで所定のclassを設定するだけ」というのがミソで、詳しい動作を制御するのは、中身を見ないとわからない…？のですが、前述のとおり、READMEでは触れられていないので、どうすりゃいいのよ　…と思って試行錯誤、ソースを見て動作を追っかけます。

GitHubの当該箇所DIFFを見ると

<form>だけではなく、classをベースで制御するように改良されたようです。

ということで、複数の住所欄がある場合の解法

この記述だと動作が不安定(というか動かない)なので…

<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />

  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />

  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />

</form>

正解：formについていた h-adrを外して、住所ごとにdivなりで囲って、divに.h-adrを振る

<form class="hogehoge">

<div class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />
</div>


<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />
</div>


<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">
  <input type="text" class="p-region p-locality p-street-address p-extended-address" />
</div>

</form>

これで、思惑どおりの動作になってくれました(･∀･)

で、記事を公開する前にもう一度検索してみると…

複数の住所入力 · Issue #7 · yubinbango/yubinbango · GitHub

本家のIssueにやり方が書いてありました(>_<)
READMEへの記載をしておいてほしいですね…。

俺なんて…。悔しいのでやり方は合っていたようなので、せっかくなので公開します…。

どなたかの参考になれば幸いです。