BLOG ブログ

> ブログ

2020.05.16

【JavaScript】簡単に設置できる郵便番号検索『ajaxzip3』使い方をご紹介！

こんにちは！

サイト作成をする際に避けては通れない必要なページ「お問い合わせフォーム」

せっかく作成した「お問い合わせフォーム」がなかなか使われず、がっかりしている人はいませんか？
フォームを使用してもらうためにはユーザー目線で作成することが必要になります。
「こんな機能があったら入力が便利なのに…」と客観的に観察することでいかに使いやすいフォームにするか考えることが重要です。

今回は「郵便番号を入力したら住所が自動表示される」機能をご紹介します。

めちゃくちゃ簡単です！！！！

誰でも簡単に設置できる郵便番号検索『ajaxzip3』

機能メリット

・実装が超簡単
・軽量なためページの読み込みが速い

実装方法

STEP1：内にJSファイルを読み込む

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

1	<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

ファイルはGitHubから読み込むのが最も簡単です。
ローカルにダウンロードしても使えますよ！

STEP2 : フォーム内に入力フィールドを設置する

▼郵便番号入力フィールド

<!-- ▼郵便番号入力フィールド(7桁) -->
<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">

1 2	<!-- ▼郵便番号入力フィールド(7桁) --> <input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">

▼住所入力フィールド

<!-- ▼住所入力フィールド(都道府県+以降の住所) -->
<input type="text" name="addr11" size="60">

1 2	<!-- ▼住所入力フィールド(都道府県+以降の住所) --> <input type="text" name="addr11" size="60">

テストフォーム

下のフォームに郵便番号を入れてみてね！

▼郵便番号入力フィールド

▼住所入力フィールド

まとめ

設定項目は2つだけです！！
簡単すぎて便利すぎるjsプラグインになっていますので、ぜひフォーム活用に役立ててください。

おすすめ記事

【JavaScript】割り算の「切り捨て」「切り上げ」「四捨五入」についてまとめJavaScriptで割り算の「切り捨て」「切り上げ」「四捨五入」についてご紹介します。JSを使って計算をするというのはWEBデザイナーなら誰しも行いますよね。
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー！

【JavaScript】全ての文字を置換する方法は「replace」と「正規表現」今回はJavaScriptで全ての文字を置換する方法についてご紹介いたします。置換の基本は「replace」しかし、ただreplaceをするだけでは全ての文字は置換されないんですね。そこで全部の文字を置換するには「正規表現」を使いましょう！！