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 自動完成屬性)。

提升自動填入體驗

自動填入功能可讓使用者更快更準確地填寫表單，提供更流暢的體驗，並協助機構減少表單填寫中途放棄的情況。如要進一步瞭解最佳做法，以及如何讓表單完全支援自動填寫功能，請參閱這份完整資源。