Html 自动完成文本输入

Autocomplete text input

提问by Evanss

I know there are a lot of JavaScript solutions, but is there an HTML5 method of having a text input with autocomplete? The datalist element is almost what I'm after, except it allows you to enter custom values rather than limiting you to what's in the list.

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

采纳答案by tim peterson

HTML5 has an autocompleteattribute which can be specified as either onor offin a field.

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

Here's an example:

下面是一个例子：

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

The way it works is that the values that you submit the first time will be suggested to you on subsequent times you visit this page on keyupof each field.

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

• The keyissue in deciding to use this feature is one of browser compatibility. Your best bet is checking multiple browsers to make sure it works. caniuse.commakes the support looks pretty bad, but I don't see any harm it using it to help those who have modern browers.

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

Other factoids about autocompletefrom W3Schools, don't hate in this case as it does cover the basics:

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

• When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
• It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
• The autocomplete attribute works with and the following types: text, search, url, tel, email, password, datepickers, range, and color.

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

回答by edigu

You should try the datalistelement. It's clearly defined in W3C HTML5 Recommendation, probably the best option on the desk for now and near future.

你应该试试这个datalist元素。它在W3C HTML5 Recommendation 中有明确定义，可能是现在和不久的将来桌面上的最佳选择。

The datalist element is hooked up to an inputelement using the list attribute on the input element.

Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a valueand a label.

使用input元素上的 list 属性将 datalist 元素连接到input 元素。

作为 datalist 元素的后代、未被禁用且其值为非空字符串的字符串的每个选项元素表示一个建议。每个建议都有一个值和一个 标签。

Google chrome and chromiumbased browsers supports it since v21.x (As of Dec 2014, current version is 39, check compatibility status of other browsers here) Firefoxand Operaalso supports for a long time. Modern(!) IE versions partially supportsdatalist.

Google chrome 和基于Chromium的浏览器从 v21.x 开始支持它（截至 2014 年 12 月，当前版本为 39，在此处查看其他浏览器的兼容性状态）Firefox和Opera也长期支持。现代（！）IE 版本部分支持datalist。

Demo:A great working datalist implementationby Eiji Kitamura.

演示：Eiji Kitamura 的一个很棒的工作数据列表实现。

Polyfill: Also check out the RelevantDropdown. It's a HTML5 datalist polyfill that depends on jQuery and Modernizr.

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

Try to run this example:

尝试运行这个例子：

<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 reference: https://www.w3.org/TR/html5/forms.html#the-datalist-element

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

回答by Katie

This question is pretty old but I have an updated answer for 2017!

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

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

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

The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153

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

All you have to do now to trigger autocomplete is to name your inputtag correctly.

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

Google wrote a pretty nice guidefor developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!

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

How to Enable AutoComplete on your HTML forms

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

Here are some key points on how to enable autocomplete:

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

• Use a <label>for all your <input>fields
• Add a autocompleteattributeto your <input>tags and fill it in using this guide.
• Name your nameand autocompleteattributes correctly for all <input>tags

• Example:

  <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="[email protected]" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="[email protected]" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="[phone]" required autocomplete="tel">
  

• <label>对所有<input>字段使用 a
• 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="[email protected]" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="[email protected]" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="[phone]" required autocomplete="tel">
  

How to name your <input>tags

如何命名你的<input>标签

In order to trigger autocomplete, make sure you correctly name the nameand autocompleteattributes in your <input>tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.

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

Here's how to name your inputs:

以下是命名输入的方法：

• Name
  • Use any of these for name: name fname mname lname
  • Use any of these for autocomplete:
    • name(for full name)
    • given-name(for first name)
    • additional-name(for middle name)
    • family-name(for last name)
  • Example: <input type="text" name="fname" autocomplete="given-name">
• Email
  • Use any of these for name: email
  • Use any of these for autocomplete: email
  • Example: <input type="text" name="email" autocomplete="email">
• Address
  • Use any of these for name: address city region province state zip zip2 postal country
  • Use any of these for autocomplete:
    • For one address input:
      • street-address
    • For two address inputs:
      • address-line1
      • address-line2
    • address-level1(state or province)
    • address-level2(city)
    • postal-code(zip code)
    • country
• Phone
  • Use any of these for name: phone mobile country-code area-code exchange suffix ext
  • Use any of these for autocomplete: tel
• Credit Card
  • Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Use any of these for autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Usernames
  • Use any of these for name: username
  • Use any of these for autocomplete: username
• Passwords
  • Use any of these for name: password
  • Use any of these for autocomplete:
    • current-password(for sign-in forms)
    • new-password(for sign-up and password-change forms)

• 姓名
  • 将其中任何一个用于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（用于注册和密码更改表格）

Resources

资源

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
• "Help Users Checkout Faster with Autofill" from Googlein 2015.

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

回答by DanO

With HTML5, a google suggest style autocomplete input is possible without any Javascript!

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

See this article: An HTML5-style "Google Suggest"

请参阅本文： HTML5 样式的“Google Suggest”

However, it is not yet fully supported enough. The examples from the article will only work in Opera at the moment.

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

For now, it is probably best to just use a well-tested library with broad browser support like JQuery UI, which has an Autocompletewidget.

目前，最好只使用经过充分测试且具有广泛浏览器支持的库，例如具有自动完成小部件的JQuery UI 。

回答by user2751200

I followed this MSDN guide to enforce the datalist input to only allow text that matches options in the datalist. It leverages the HTML Contstraint Validation API:

我按照这个 MSDN 指南强制数据列表输入只允许与数据列表中的选项匹配的文本。它利用了 HTML 约束验证 API：

http://msdn.microsoft.com/en-us/magazine/dn133614.aspx

http://msdn.microsoft.com/en-us/magazine/dn133614.aspx