自动完成文本输入

Question

我知道有很多 JavaScript 解决方案，但有没有一种 HTML5 方法可以自动完成文本输入？ datalist 元素几乎是我所追求的，除了它允许您输入自定义值而不是将您限制在列表中的内容。

Answer 1

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

Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.

以下答案来自我的原始答案：https://stackoverflow.com/a/41965106/1696153

要触发自动完成，您现在要做的就是正确命名您的 input 标记。

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

如何在您的 HTML 表单上启用自动完成功能

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

• 为所有<input> 字段使用<label>
• 将autocomplete 属性添加到您的<input> 标记并使用此guide 填写。
• 为所有<input> 标签正确命名name 和autocomplete 属性

• 示例：

  <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> 标签

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

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

• 名字
  • 对 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（用于注册和密码更改表格）

资源

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google。好像几乎天天更新。精彩的阅读。
• "Help Users Checkout Faster with Autofill" from Google 2015 年。

Answer 2

您应该尝试datalist 元素。它在W3C HTML5 Recommendation 中明确定义，可能是目前和不久的将来桌面上的最佳选择。

datalist 元素使用列表连接到input 元素 输入元素的属性。

作为 datalist 元素后代的每个选项元素，即 未被禁用，并且其值为非空字符串 字符串，代表一个建议。每个建议都有一个value 和一个 label.

基于 Google chrome 和 chromium 的浏览器从 v21.x 开始支持它（截至 2014 年 12 月，当前版本为 39，检查 other browsers here 的兼容性状态）Firefox 和 Opera 也支持很久了。 Modern(!) IE 版本部分支持 datalist。

演示： 很棒的 working datalist implementation，作者是 Eiji Kitamura。

Polyfill：另请查看RelevantDropdown。它是一个依赖于 jQuery 和 Modernizr 的 HTML5 数据列表 polyfill。

尝试运行这个例子：

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3 参考：https://www.w3.org/TR/html5/forms.html#the-datalist-element

Answer 3

使用 HTML5，无需任何 Javascript 即可实现 google 建议样式的自动完成输入！

见这篇文章：An HTML5-style "Google Suggest"

但是，它还没有得到足够的支持。文章中的示例目前仅适用于 Opera。

目前，最好只使用经过良好测试且支持广泛浏览器的库，例如 JQuery UI，它有一个 Autocomplete 小部件。

Answer 4

HTML5 有一个autocomplete 属性，可以在字段中指定为on 或off。

这是一个例子：

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

它的工作方式是，您第一次提交的值将在您以后访问此页面时在每个字段的keyup 上向您建议。

• 决定使用此功能的关键问题是浏览器兼容性问题之一。您最好的选择是检查多个浏览器以确保其正常工作。 caniuse.com 使支持看起来很糟糕，但我认为使用它来帮助那些拥有现代浏览器的人没有任何害处。

来自W3Schools 的关于autocomplete 的其他事实，在这种情况下不要讨厌，因为它确实涵盖了基础知识：

• 当自动完成打开时，浏览器会自动完成值 基于用户之前输入的值。
• 可以 表单自动完成“开启”，特定输入“关闭” 字段，反之亦然。
• 自动完成属性适用于 以及以下类型：文本、搜索、网址、电话、电子邮件、 密码、日期选择器、范围和颜色。