Q&A
Closed
html上で郵便番号を入力して画像のように「住所検索」ボタンを押すと
住所が入力される javascriptのライブラリ又はコードを探しています。
【条件】
・郵便番号を入力 → ボタン押下 → 住所が入力
→郵便番号を入力したら即住所が入力されるのではなく、必ずボタンを押下して住所が入力。
・住所は 「都道府県」＋ 「市町村」でひとまとまりになってる
(例：神奈川県横浜市港北区～みたいな)
色々探して参考のサイトを見ましたが、
上記の条件を満たすものはありませんでした。
どなたかご存じの方よろしくお願いします。
参考で提示されているYubinBango.jsで出来ませんか？
ボタンを押したら反映するカスタマイズ例が記載されていますよ。
<html lang="ja">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>住所取得</title>
<!--Bootstrap5.3.0CSS-->
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css' rel='stylesheet'
integrity='sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp' crossorigin='anonymous'>
<script>
function ConvertAddress() {
var postcode = document.getElementById("postcode")
var address = document.getElementById("address")
fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${postcode.value}`)
.then(response => response.json())
.then(data => {
address.value = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
})
.catch(error => console.log(error))
}
</script>
</head>
<body>
<!--Navigation Bar-->
<nav class='navbar navbar-light bg-light'>
<div class='container-fluid'>
<a class='navbar-brand' href='#'>住所取得プログラム</a>
</div>
</nav>
<div id='contents' class='mx-2'>
<form class="row g-1">
<div class="col-auto">
<input id="postcode" class="form-control" type="text" placeholder="郵便番号">
</div>
<div class="col-auto">
<input type="button" class="btn btn-primary" value="変換" onClick="ConvertAddress()">
</div>
<div class="col-auto">
<input id="address" class="form-control" type="text" placeholder="住所">
</div>
</form>
</div>
</body>
</html>
BootStrapで少し見た目を整えています。
参考
https://kasumiblog.org/javascript-postcode-address-autofill/