郵便番号検索　住所自動入力 JavaScript

11073 ワード
住所 JavaScript 郵便番号 自動入力 JavaScript テキストリンク

はじめに

javascriptで郵便番号を検索して住所をフォームに自動入力するスクリプトを作りました。
既存の物は非同期のため入力後の処理が出来ませんでしたが、今回作ったものは関数を渡すことで入力後の処理が出来ます。

使い方

導入

以下をHTMLに追加します。

<script src="https://mao2009.github.io/zipToAddress/zipToAddress.js"></script>

フォームを作り、ボタンなどのイベントにzipToAddressを登録します。
zip1, zip2, prefecture, city, streetにはセレクタの文字列
funcには自動入力後に処理したい関数を指定します。
必須はzip1、zip2、prefectureですが郵便番号が一つのフィールドの場合はzip2には""を指定してください。
郵便番号にハイフンが入っていても全角数字でも問題ありません。

zipToAddress
zipToAddress(zip1, zip2, prefecture, city, street, func)

住所フィールドが1つの場合

html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    住所 :
    <input type="text" id="address"></input>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#address")'>住所検索</button>
</div>

住所フィールドが2つの場合

html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    住所 :
    <input type="text" id="pref"></input>
    <input type="text" id="city"></input>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#pref", "#city")'>住所検索</button>
</div>

住所フィールドが3つの場合

html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    住所 :
    <input type="text" id="pref"></input>
    <input type="text" id="city"></input>
    <input type="text" id="street"></input>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#pref", "#street")'>住所検索</button>
</div>

住所を取得後の処理をする場合

html
<div>
    郵便番号:
    <input type="text" name="zip1"></input>　-　
    <input type="text" name="zip2"></input>
</div>
<div>
    <input type="text" id="pref"></input>
    <input type="text" id="city"></input>
    <input type="text" id="street"></input>
</div>
<div>
    住所 :
    <textarea id="massage"></textarea>
</div>
<div>
    <button onclick='zipToAddress("[name=zip1]", "[name=zip2]", "#pref", "#street", sampleFunc)'>住所検索</button>
</div>
<script id="sample_script">
    function sampleFunc(data) {
        const zip = document.querySelector("[name=zip1]").value + "-" +document.querySelector("[name=zip2]").value;
        const massage = document.querySelector("#address");
        const prefecture = data.results[0].address1;
        const city = data.results[0].address2;
        const street = data.results[0].address3;

        massage.value = zip + "\n" + prefecture + city + street;
    }
</script>

My Accounts