【超级简单！】使用 YubinBango.js 自动填充地址

大家好！我是系统开发部的福井！
这次我想介绍一下我用 YubinBango.js JavaScript 库创建的一个表单，只需输入邮政编码即可自动填写您的地址！

它非常容易上手，实施起来也很快捷，所以如果您有兴趣，请尝试一下！

*实现所需的信息已包含在下方 GitHub 上的 README 文件中，如果您时间紧迫，请直接参考该文件。https
://github.com/yubinbango/yubinbango

YubinBango.js 是什么？

首先，让我简要介绍一下 YubinBango.js 是什么。

正如我在开头已经基本介绍过的，
当您输入邮政编码时，
它会自动在指定的输入表单中填写相应的地址
这是一个非常方便的 JavaScript 库，

它非常易于使用。将库加载到 HTML 后，您只需将指定的类分配给“邮政编码输入表单”和“地址输入表单（地址显示区域）”即可。（很简单……！！）

我真的试过了！

所以我创建了一个示例表单。（表单的装饰是用Bootstrap完成的。）

以下是我用来测试的代码！

    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><div class="col-12 px-2"><form action="" class="h-adr" method="post"><span class="p-country-name" style="display:none;">日本</span><div class="card card-info mt-4"><div class="card-header"><h3 class="card-title">邮政编码自动填充</h3></div><div class="form-horizontal"><div class="card-body"><div class="form-group row"><label for="zip_code" class="col-1 col-form-label">邮政编码</label><div class="col-3"><input type="text" name="zip_code" id="zip_code" placeholder="郵便番号を入力してください" class="p-postal-code form-control" value=""></div></div><div class="form-group row"><label for="prefecture_name" class="col-1 col-form-label">县</label><div class="col-3"><input type="text" id="prefecture_name" class="p-region form-control" value=""></div></div><div class="form-group row"><label for="city_name" class="col-1 col-form-label">市政当局</label><div class="col-3"><input type="text" id="city_name" class="p-locality form-control" value=""></div></div><div class="form-group row"><label for="town_name" class="col-1 col-form-label">城镇区域</label><div class="col-3"><input type="text" id="town_name" class="p-street-address form-control" value=""></div></div><div class="form-group row"><label for="extended_address_name" class="col-1 col-form-label">其他地址</label><div class="col-3"><input type="text" id="extended_address_name" class="p-extended-address form-control" value=""></div></div></div></div></div></form></div>

实施要点

实施过程中需要牢记以下四个关键点：

① 为表单标签指定类名“h-adr”。②
为表单中类名为“p-country-name”的元素指定“Japan”。③
为输入邮政编码的表单指定类名“p-postal-code”。④ 为显示
地址的元素指定类名，具体如下：都道府县名称（p-region）、市/区/镇/村（p-locality）、街道/区（p-street-address）和后续地址（p-extended-address）。

当我将邮政编码输入到我创建的示例表格中时，结果如下！

这样，地址将根据邮政编码自动输入。
顺便一提，即使邮政编码不包含连字符，自动地址输入功能也能正常工作。
此外，虽然示例中将都道府县名称和市/区/镇/村分开输入，但也可以通过将都道府县名称（p-region）、市/区/镇/村（p-locality）、镇/区（p-street-address）和后续地址（p-extended-address）指定为单个元素的类属性，将它们作为一个连接字符串输入。

奖金

YubinBango.js 非常有用，所以我决定看看它在实际应用中的效果如何。

检查 Chrome 开发者工具keyup 事件监听器确认

因此，当您输入邮政编码时，自动填充过程被触发了！

也就是说，
是的！此事件的触发条件可以更改为除 keyup 之外的其他条件！

如前所述，GitHub 上有一个 JS 文件，请使用以下链接中的 JavaScript 源代码创建您自己的 JS 文件：
https://github.com/yubinbango/yubinbango/blob/gh-pages/yubinbango.js
*这次您需要加载新创建的 JS 文件。请检查您是否通过 CDN 加载了该文件。

我们不会深入探讨完整的 JavaScript 代码，但您可以在下面的代码中看到，已经添加了一个 keyup 事件监听器。

          r[r.length - 1].addEventListener("keyup", function (e) { t.prototype.u(nv(e.target.parentNode)) }, !1)

通过更改此事件，您可以指定任何您喜欢的事件！

在这种情况下，假设我们将其更改为“点击”事件。

          r[r.length - 1].addEventListener("click", function (e) { t.prototype.u(nv(e.target.parentNode)) }, !1)

我检查了开发者工具，

确认它已成功更改为“点击”事件！

当然，除了点击事件之外，你还可以将其更改为其他各种事件，例如按键按下或聚焦事件！

使用 YubinBango.js 后的感想

今天，我们介绍了如何使用 YubinBango.js 自动填充地址！

虽然自动输入和显示地址的方法有很多种，而且在实际开发中它的应用场景可能比较有限，但我认为它非常适合开发在相对封闭的环境中使用的应用程序，例如公司内部工具！
无论如何，它的易用性和快速部署是其主要优势，所以我希望您能尝试一下！

最后

我已推出“SEKARAKU Lab”，这是我所属系统开发公司的服务网站。Beyond
提供从服务器设计、构建到运维的一站式服务，如果您在服务器端开发方面遇到任何问题，欢迎随时联系我们。SEKARAKU
Lab：[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

感谢您阅读到最后！