随遇而安 2024-12-08 23:14:49

Google 现在提供了相关文档：

和

春夜浅 2024-12-08 23:14:49

就我而言， $('#EmailAddress').attr('autocomplete', 'off'); 不起作用。
但以下内容适用于 jQuery 的 chrome 版本 67。

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');

In my case, $('#EmailAddress').attr('autocomplete', 'off'); is not worked.
But following works on chrome Version 67 by jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');

回复收藏 0 原文

我的鱼塘能养鲲 2024-12-08 23:14:48

2017 年更新： 看起来凯蒂的答案比我的有更多最新信息。未来的读者：请为她的答案投上一票。

这是一个很好的问题，也是一个需要文档的问题出乎意料的是很难获得。实际上，在很多情况下，您会发现 Chrome 自动填充功能“正常工作”。例如，以下 html 片段会生成一个表单，至少对我来说（Chrome v.18），在单击第一个字段后会自动填充该表单：

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

但是，这个答案并不令人满意，因为它将解决方案留在了以下领域： “魔法。”深入挖掘后，我了解到 Chrome（和其他支持自动填充的浏览器）主要依靠上下文线索来确定应填充到表单元素中的数据类型。此类上下文线索的示例包括输入元素的名称、元素周围的文本以及任何占位符文本。

然而最近，Chrome 团队承认这是一个不能令人满意的解决方案，他们已经开始推动此事的标准化。来自 Google 的内容非常丰富的帖子网站管理员小组最近讨论了这个问题，解释道：

不幸的是，到目前为止，网站管理员很难确保 Chrome 和其他表单填写提供商能够正确解析其表单。存在一些标准；但它们给网站的实施带来了繁重的负担，因此在实践中使用得不多。

（他们引用的“标准”是 Avalanchis 中提到的最新版本的规范 ' 上面的答案。）

谷歌的帖子继续描述了他们提出的解决方案（该解决方案遭到了帖子评论中的严重批评）。他们建议为此目的使用一个新属性：

只需向输入元素添加一个属性，例如电子邮件地址字段可能如下所示：

。 ..其中 x- 代表“实验性”，如果 & 将被删除当这成为一个标准时。如需了解更多详情，请阅读这篇文章，或者如果您想深入挖掘，您可以在 whatwg 上找到该提案的更完整解释维基百科。

更新：
正如这些富有洞察力中指出的答案，Chrome用来识别/识别公共字段的所有正则表达式都可以在autofill_regex_constants.cc.utf8。因此，要回答最初的问题，只需确保 html 字段的名称与这些表达式匹配即可。一些示例包括：

名字： “first.*name|initials|fname|first$”
姓氏： “last。 *姓名|lname|姓氏|姓氏$|第二名|家庭。*姓名"
电子邮件: "e.?mail"
地址（第 1 行）： “地址.*line|address1|addr1|街道”
邮政编码： “zip|postal|post.*code|pcode|^1z$”

UPDATE for 2017: Looks like the answer from Katie has more up-to-date information than mine. Future readers: give your up-votes to her answer.

This is a great question and one for which documentation is surprisingly hard to come by. Actually, in many cases you will find that the Chrome Autofill functionality "just works." For example, the following snippet of html produces a form which, at least for me (Chrome v. 18), is automatically filled after clicking in the first field:

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

However, this answer is unsatisfactory, as it leaves the solution in the realm of "magic." Digging deeper I learned that Chrome (and other autofill-enabled browsers) primarily rely on contextual clues to determine the type of data that should be filled into form elements. Examples of such contextual clues include the name of an input element, the text surrounding the element, and any placeholder text.

Recently, however, the Chrome team acknowledged that this is an unsatisfactory solution, and they have begun pressing for standardization in this matter. A very informative post from the Google Webmasters group recently discussed this issue, explaining:

Unfortunately, up to now it has been difficult for webmasters to ensure that Chrome and other form-filling providers can parse their form correctly. Some standards exist; but they put onerous burdens on the implementation of the website, so they’re not used much in practice.

(The "standards" they refer to is a more recent verion of the spec mentioned in Avalanchis' answer above.)

The Google post goes on to describe their proposed solution (which is met by significant criticism in the comments of the post). They propose the use of a new attribute for this purpose:

Just add an attribute to the input element, for example an email address field might look like:

<input type=”text” name=”field1” x-autocompletetype=”email” />

...where the x- stands for "experimental" and will be removed if & when this becomes a standard. Read the post for more details, or if you want to dig deeper, you will find a more complete explanation of the proposal on the whatwg wiki.

UPDATE:
As pointed out in these insightful answers, all the regular expressions Chrome uses to identify/recognize common fields can be found in autofill_regex_constants.cc.utf8. So to answer the original question, just make sure the names for your html fields get matched by these expressions. Some examples include:

first name: "first.*name|initials|fname|first$"
last name: "last.*name|lname|surname|last$|secondname|family.*name"
email: "e.?mail"
address (line 1): "address.*line|address1|addr1|street"
zipcode: "zip|postal|post.*code|pcode|^1z$"

回复收藏 0 原文

我的影子我的梦 2024-12-08 23:14:48

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

以下是用于启用自动完成功能的 WHATWG 文档的链接。

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

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

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

对所有字段使用
将 autocomplete 属性添加到您的标记中，并使用此指南。
为所有标记正确命名 name 和 autocomplete 属性

示例：

名称
<输入类型=“文本”名称=“名称”id=“frmNameA”
placeholder =“全名”需要自动完成=“名称”>

<标签=“frmEmailA”>电子邮件
<输入类型=“电子邮件”名称=“电子邮件”id=“frmEmailA”
placeholder="[电子邮件受保护]" 必需 autocomplete="email">


确认电子邮件
<输入类型=“电子邮件”名称=“emailC”id=“frmEmailC”
placeholder="[电子邮件受保护]" 需要 autocomplete="email">

电话
<输入类型=“电话”名称=“电话”id=“frmPhoneNumA”
placeholder="+1-555-555-1212" 需要 autocomplete="tel">

如何命名标签

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

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

名称
- 使用以下任何一个作为名称：name fname mname lname
- 使用其中任何一个来自动完成：
  - 姓名（全名）
  - given-name（名字）
  - additional-name（中间名）
  - family-name（姓氏）
- 示例：
电子邮件
- 使用其中任何一个作为名称：电子邮件
- 使用其中任何一项自动完成：电子邮件
- 示例：
地址
- 使用以下任意一项作为名称：地址城市地区省州 zip zip2 邮政国家
- 使用其中任何一个来自动完成：
  - 对于一个地址输入：
    - 街道地址
  - 对于两个地址输入：
    - 地址行1
    - 地址行2
  - address-level1（州或省）
  - 地址级别2（城市）
  - 邮政编码（邮政编码）
  - 国家
电话
- 使用以下任意一项作为名称：电话、手机、国家/地区代码、区号交换后缀分机号
- 使用其中任何一个来自动完成：tel
信用卡
- 使用以下任意一项作为姓名：ccname 卡号 cvc ccmonth ccyear exp-date 卡类型
- 使用其中任何一个来自动完成：
  - 抄送名称
  - 抄送号码
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc 类型
用户名
- 使用其中任何一个作为名称：用户名
- 使用其中任何一个自动完成：用户名
密码
- 使用以下任意一项作为名称：密码
- 使用其中任何一个来自动完成：
  - 当前密码（用于登录表单）
  - 新密码（用于注册表单和密码更改表单）

资源

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

Here's a link to the WHATWG documentation for enabling autocomplete.

Google wrote a pretty nice guide for 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!

How to Enable AutoComplete on your HTML forms

Here are some key points on how to enable autocomplete:

Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes 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="+1-555-555-1212" required autocomplete="tel">

How to name your `<input>` tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes 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.

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)

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 Google in 2015.

回复收藏 0 原文

甜妞爱困 2024-12-08 23:14:48

根据我的测试，x-autocomplete 标记没有执行任何操作。而是在输入标记上使用 autocomplete 标记，并根据此处的 HTML 规范设置它们的值 http://www.whatwg。 org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field 。

示例：

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

父表单标签需要 autocomplete="on" 和 method="POST"。

From my testing, the x-autocomplete tag does nothing. Instead use autocomplete tags on your input tags, and set their values according to the HTML spec here http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field .

Example:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

The parent form tag needs autocomplete="on" and method="POST".

回复收藏 0 原文

长梦不多时 2024-12-08 23:14:48

您需要适当地命名元素，以便浏览器自动填充它们。

以下是 IETF 规范：

http://www.ietf.org/rfc/rfc3106.txt< /a>1

回复收藏 0 原文

家住魔仙堡 2024-12-08 23:14:48

我刚刚研究了规范并得到了一个很好的工作示例 - 包括更多字段。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

它包含 2 个独立的地址区域以及不同的地址类型。
在 iOS 8.1.0 上也进行了测试，它似乎总是一次填充所有字段，而桌面 chrome 会自动填充地址。

I just played arround with the spec and got a nice working example - including a few more fields.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

It contains 2 separate address areas and also differen address-types.
Tested it also on iOS 8.1.0 and it seems that it always fill all fields at once, while desktop chrome autofill address by address.

回复收藏 0 原文

套路撩心 2024-12-08 23:14:48

对此自动填充功能的更多控制，Chrome Canary 推出了一个新的实验性 API，可用于在询问用户后访问数据：

看起来我们将获得 chromium.org/developers/using-requestautocomplete" rel="nofollow">http://www.chromium.org/developers/using-requestautocomplete
http://blog.alexmaccaw.com/requestautocomplete

Google 提供的新信息：

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

回复收藏 0 原文

雾里花 2024-12-08 23:14:48

这是真正的答案：

这有效：http://jsfiddle.net/68LsL1sq/1/< /a> Nom
这不是：http://jsfiddle.net/68LsL1sq/2/ 否

唯一的区别在于标签本身。 “Nom”来自葡萄牙语中的“Name”或“Nome”。

所以这就是您需要的：

表单包装器；
名称

仅此而已。

回复收藏 0 原文

荆棘i 2024-12-08 23:14:48

这是 Google 自动填充“名称”的新列表。有任何允许的语言的所有受支持的名称。

autofill_regex_constants.cc

回复收藏 0 原文

如何在 Google Chrome 中触发自动填充？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

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

如何命名标签

资源

How to Enable AutoComplete on your HTML forms

How to name your `<input>` tags

Resources

JSBIN

JSBIN

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

如何在 Google Chrome 中触发自动填充？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

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

如何命名 标签

资源

How to Enable AutoComplete on your HTML forms

How to name your <input> tags

Resources

关于作者

相关话题

热门标签

推荐作者

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

如何命名标签

How to name your `<input>` tags