改进了 Chrome 自动填充功能中的日语音标名称支持

Yu Tsuno
Yu Tsuno
LinkedIn
Karol Sygiet
Karol Sygiet
LinkedIn

发布时间：2026 年 4 月 15 日

Chrome 团队从全球视角出发，了解当地需求。我们一直在努力改进本地化功能，并支持不同地区的文化细微差别。我们最近更新了 Chrome 自动填充功能中的日语命名惯例，这是我们不断努力让网络更具包容性并为全球用户提供更实用帮助的一部分。

此更新扩大了对同音异形名称变体的支持，让用户可以自动填写汉字和假名（片假名或平假名中的拼音文字）名称字段。在日本，名称既有视觉表示形式，也有特定的发音，因此通常需要在网页表单中单独设置字段。 通过启用对这些音标变体的支持，Chrome 可减少完成在线表单（例如医疗注册表单到电子商务结账表单）的摩擦，从而节省用户的时间和精力。

为何日语名称需要专门的支持

由于同一个日文汉字可能有多种读音，因此在线表单通常会要求用户分别输入汉字姓名和假名姓名。这样可确保正确称呼用户（例如，通过电话），并确保可以准确地对数据进行排序和管理。

对于开发者来说，一个主要挑战是 HTML 标准中没有语音名称的标准值。因此，浏览器会结合使用多种信号来确定某个字段是否要求提供音标名称。

Chrome 如何检测姓名拼音字段

Chrome 自动填充功能会使用基于以下三种主要信号的启发式方法来识别拼音名称字段：

  • autocomplete 属性
  • 字段标签
  • 字段 name 属性

autocomplete 属性

autocomplete 属性是最强的信号，优先级最高。 不过，如果您使用非标准值，Chrome 不会回退到启发式方法。由于这会阻止自动填充功能正常运行，因此请避免使用非标准的自动填充属性。

由于 HTML 规范缺少专用的音标名称值，开发者应省略此属性，或将其设置为常规名称对应项：

  • 全名拼音： autocomplete="name"
  • 姓氏拼音： autocomplete="family-name"
  • 名字拼音： autocomplete="given-name"

标签和名称属性

由于标准 autocomplete 值同时适用于常规名称和音标名称，因此 Chrome 依靠字段的 name 和 <label> 文本来区分两者。

下表列出了 Chrome 的解析器用于识别音标字段的有效字符串和字符：

字段类型 有效的字段名称 有效的字段标签
全名拼音 full-name-phonetic セイメイ せいめい セイメイ せいめい
姓氏拼音 family-name-phonetic セイ せい セイ せい 姓ふりがな
名字拼音 given-name-phonetic メイ 名ふりがな メイ めい 名ふりがな

最佳实践示例

为了提供良好的体验，请使用清晰的标签和描述性回退名称来构建表单：

<form>
  <!-- Full phonetic name -->
  <label for="phonetic-full">セイメイ</label>
  <input id="phonetic-full" name="full-name-phonetic" type="text"/>

  <!-- Family phonetic name -->
  <label for="phonetic-family">セイ</label>
  <input id="phonetic-family" name="family-name-phonetic" type="text"/>

  <!-- Given phonetic name -->
  <label for="phonetic-given">メイ</label>
  <input id="phonetic-given" name="given-name-phonetic" type="text"/>
</form>

Chrome 如何确定是片假名还是平假名

Chrome 自动填充功能可以根据表单的需要自动音译并填充片假名或平假名。

Chrome 会检查字段的标签（而非名称），以确定要使用哪个脚本：

  • 如果标签包含至少一个片假名字符，Chrome 会在相应字段中填充片假名。
  • 否则，Chrome 会默认使用平假名。
字段标签 角色脚本已填充
セイメイ（片假名） 片假名
せいめい（平假名） 平假名
全名拼音（英文） 平假名
セイメイせいめい（混合） 片假名

调试拼音自动填充

您可以使用 CodePen 中的演示网站测试 Chrome 自动填充功能如何处理日语拼音名称：在 CodePen 上查看演示

您可以使用 Chrome 开发者工具验证 Chrome 是否正确识别了您的字段：

  1. 打开您的网页和开发者工具面板。
  2. 前往自动填充工具（位于更多工具菜单中）。
  3. 触发表单填充。
  4. 该工具应将拼音字段归类为全称备选拼写、姓氏备选拼写或名字备选拼写。

包含用于输入联系人拼音名称（假名）的选项的表单

用户如何在 Chrome 中设置音标姓名

虽然本文主要面向开发者，但了解用户如何设置其音标个人资料有助于您测试表单。

  1. 前往 chrome://settings/addresses（或某些版本中的 chrome://settings/contactInfo）打开 Chrome 设置。
  2. 选择联系人或地址旁边的三点状菜单，然后点击修改。
  3. 在提供的字段中输入拼音名称（假名）。

Chrome 开发者工具的“自动填充”面板，其中显示了归类为“备用全名”“备用姓氏”或“备用名字”的拼音名称字段

Chrome 会保存这些音标个人资料，以便用户自动填充表单，而无需重新输入。如果用户保存了音标名称，Chrome 会在检测到合适的字段（例如，使用标准属性或启发式方法）时尝试应用该名称。

帮助 Chrome 正确拆分名称

Chrome 会自动将日文全名拆分为姓氏和名字，但此过程并不总是那么简单。虽然 Chrome 具有内置机制，可随着时间的推移学习并改进这些划分，但用户可以在 Chrome 自动填充设置 (chrome://settings/addresses) 的姓名或拼音姓名字段中输入分隔符，手动确保准确性。Chrome 会将以下字符识别为定界符：

  • -（连字符）
  • ・（片假名间隔号）
  • ·（中间点）
  • 　（表意字间隔）
  • 标准空间

虽然您可以使用任一文字输入拼音名称，但 Chrome 默认在设置界面中以平假名显示这些名称（与标准 Google 通讯录行为一致）。

对于开发者而言，虽然手动分隔符有助于 Chrome 解析单字段输入，但确保 Chrome 正确处理名称的最可靠方法是消除歧义。尽可能在设计表单时为姓氏和名字分别使用不同的输入字段（使用 family-name 和 given-name 自动补全属性）。

改进自动填充体验

自动填充功能可帮助用户更快、更准确地填写表单，从而为用户打造更顺畅的体验，并帮助组织减少表单放弃率。如需详细了解最佳实践以及如何让表单完全支持自动填充，请探索全面的资源。