javascript - HTML 表单的自动完成

Question

我正在寻找有关表单字段自动完成的答案。

如何自动填写常见输入，如名字、姓氏、地址..？

在 Chrome 中，如果用户有 Google 个人资料，则可以自动填充字段。

看来 IE 提供了类似的功能：

（来自 MS 网站）“您可以使用 AutoComplete 存储您在 Web 表单字段中键入的密码和其他信息。当您打开 AutoComplete 时，Internet Explorer 将自动填写您在 Web 表单中经常键入的字段，例如您的姓名和地址。”

有什么方法可以确保自动填充发生，跨浏览器，使用 HTML/JS？

Answer 1

这个问题已经很老了，但我有2017 年的更新答案！

现在有一个关于如何命名标签以触发自动完成的跨浏览器标准。<input>

这是官方当前 WHATWG HTML 标准的链接，用于启用自动完成功能。

Google为开发对移动设备友好的 Web 应用程序编写了一个非常好的指南。他们有一节介绍如何命名表单上的输入以轻松使用自动填充。尽管它是为移动设备编写的，但这适用于桌面和移动设备！

如何在 HTML 表单上启用自动完成

以下是有关如何启用自动完成功能的一些要点：

• 将 a<label>用于所有<input>字段
• autocomplete为您的标签添加一个属性<input>并使用本指南进行填写。
• 为所有标签正确命名您的name和autocomplete属性<input>

• 示例：

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

如何命名您的<input>标签

为了触发自动完成，请确保正确命名标签中的name和autocomplete属性。<input>这将自动允许在表单上自动完成。确保也有一个<label>！也可以在此处找到此信息。

以下是如何命名您的输入：

• 姓名
  • 将这些中的任何一个用于name：name fname mname lname
  • 将这些中的任何一个用于autocomplete：
    • name（全名）
    • given-name（对于名字）
    • additional-name（中间名）
    • family-name（对于姓氏）
  • 例子：<input type="text" name="fname" autocomplete="given-name">
• 电子邮件
  • 将这些中的任何一个用于name：email
  • 将这些中的任何一个用于autocomplete：email
  • 例子：<input type="text" name="email" autocomplete="email">
• 地址
  • 将这些中的任何一个用于name：address city region province state zip zip2 postal country
  • 将这些中的任何一个用于autocomplete：
    • 对于一个地址输入：
      • street-address
    • 对于两个地址输入：
      • address-line1
      • address-line2
    • address-level1（州或省）
    • address-level2（城市）
    • postal-code（邮政编码）
    • country
• 电话
  • 将这些中的任何一个用于name：phone mobile country-code area-code exchange suffix ext
  • 将这些中的任何一个用于autocomplete：tel
• 信用卡
  • 将这些中的任何一个用于name：ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • 将这些中的任何一个用于autocomplete：
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• 用户名
  • 将这些中的任何一个用于name：username
  • 将这些中的任何一个用于autocomplete：username
• 密码
  • 将这些中的任何一个用于name：password
  • 将这些中的任何一个用于autocomplete：
    • current-password（用于登录表格）
    • new-password（用于注册和密码更改表格）

资源

• 当前用于自动完成的 WHATWG HTML 标准。
• 来自 Google 的“创建惊人的表单”。好像几乎天天更新。优秀的阅读。
• 2015 年来自 Google 的“使用自动填充功能帮助用户更快结帐” 。

Answer 2

没有跨浏览器的方法可以做到这一点，浏览器要么支持 HTML5 和自动填充，要么不支持。

要使其正常工作，您所要做的就是使用正确的输入名称，其余的由浏览器处理，您无法访问浏览器存储的任何数据。

<input type="text" name="fname" /> //first name
<input type="text" name="lname" /> //last name
<input type="text" name="email" /> //email
//etc...

小提琴

根据this answer，Chrome使用的正则表达式如下：

• 名字： “first.*name|首字母|fname|first$”
• 电子邮件： “e.?mail”
• 地址（第 1 行）： “地址。*line|address1|addr1|street”
• 邮编： “邮编|邮政|邮政。*code|pcode|^1z$”

只要您的姓名可以与这些正则表达式匹配，自动填充功能就可以在大多数浏览器中使用。

Answer 3

您可以为表单或每个表单字段添加自动完成功能。试试这个

<form autocomplete="on">
<input type="text" name="foo" />
....

</form>