[大阪/横滨/德岛] 寻找基础设施/服务器端工程师！

【超过500家企业部署】AWS搭建、运维、监控服务

【CentOS的后继者】AlmaLinux OS服务器搭建/迁移服务

[仅适用于 WordPress] 云服务器“Web Speed”

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

2021.09.16

网络系统开发

目录 [非表示]

1 什么是 YubinBango.js？
2 我实际上尝试过使用它！
3 实施要点
4 奖金
5 使用 YubinBango.js 的印象
6 最后

你好！我是系统开发部的福井！
这次，我想介绍一个表单，它使用一个名为 YubinBango.js 的 js 库来创建一个只需输入邮政编码即可自动输入地址的表单。

它非常容易实现并且速度非常快，所以如果您有兴趣，请尝试一下！

*实现所需的信息在下面的 GitHub 上的 README 中列出，所以如果您赶时间，请参阅此处。
https://github.com/yubinbango/yubinbango

什么是 YubinBango.js？

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

一开始的介绍已经完成了，但

它是一个非常方便的 JavaScript 库， （1）输入邮政编码，
（2）自动将相应的地址输入到指定的输入表单中

它非常容易使用；一旦将库加载到 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 之外的触发条件！

js 文件可以在 GitHub 上找到，我在开头介绍过，因此使用下面链接中的 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)

检查开发者工具。

我们已成功确认该活动已更改为“点击”活动！

当然你可以改成点击以外的各种事件，比如keydown、focus等！

使用 YubinBango.js 的印象

今天，我们介绍了使用 YubinBango.js 自动输入地址！

自动输入和显示地址的方式有很多种，所以我认为在实际开发中可以使用的情况相当有限，但是可以用于内部工具等在某种程度上封闭的环境中使用的应用程序开发我觉得很完美！
无论如何，它非常容易实现，并且可以很快实现，所以希望您尝试一下！

最后

我开设了我所属的系统开发服务网站“SEKARAKU Lab”。
Beyond是从服务器设计搭建到运营的一站式服务，所以如果您在服务器端开发方面遇到任何问题，请随时联系我们。
SEKARAKU 实验室： [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

感谢您和我们在一起直到最后！

如果您觉得这篇文章有帮助，请点赞！

加载中...