首页 文章

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

提问于
浏览 次
170

我想知道是否有某种特殊标记可以为特定表单启用Chrome自动填充功能 . 我只发现了有关如何禁用它的问题，但我想知道我是否可以在html代码中添加某种标记，以告诉浏览器“这是地址的输入”或“这是邮政编码字段“正确填写（假设用户激活此功能） .

html google-chrome autofill

10 回答

  • 0

    UPDATE for 2017: 看起来Kayvar的答案比我的更新 . 未来的读者：给你的选票that answer .

    这是一个很好的问题，很难找到文档 . 实际上，在很多情况下，您会发现Chrome自动填充功能“正常运行” . 例如，以下html片段会生成一个表单，至少对我来说（Chrome v.18），在单击第一个字段后会自动填充该表单：

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

    然而，这个答案并不令人满意，因为它将解决方案留在了"magic."深入挖掘我了解到Chrome（以及其他支持自动填充的浏览器）主要依赖于上下文线索来确定应填充到表单元素中的数据类型 . 此类上下文线索的示例包括输入元素的 name ，元素周围的文本以及任何占位符文本 .

    然而，最近，Chrome团队承认这是一个令人不满意的解决方案，他们已经开始在这个问题上迫切需要标准化 . 来自Google网站管理员小组的A very informative post最近讨论了这个问题，解释如下：

    遗憾的是，到目前为止，网站管理员很难确保Chrome和其他表单填写提供商能够正确解析其表单 . 存在一些标准;但是他们给网站的实施带来了沉重的负担，所以在实践中并没有太多用处 .

    （他们所指的"standards"在Avalanchis上面的答案中提到了a more recent verion of the spec . ）

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

    只需在input元素中添加一个属性，例如电子邮件地址字段可能如下所示：<input type =“text”name =“field1”x-autocompletetype =“email”/>

    ... x- 代表"experimental"，如果成为标准，将被删除 . 阅读the post了解更多详情，或者如果您想深入挖掘，您会找到更完整的提案说明on the whatwg wiki .

    UPDATE: 正如insightful answers中指出的那样，Chrome可用于识别/识别公共字段的所有正则表达式都可以在autofill_regex_constants.cc.utf8中找到 . 因此，要回答原始问题，请确保您的html字段的名称与这些表达式匹配 . 一些例子包括：

    • 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$"

    回复于
  • 54

    这个问题很老了，但我有一个 updated answer for 2017 ！

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

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

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

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

    • Use a <label> for all your <input> fields

    • Add a autocomplete attribute 到您的 <input> 标签并使用此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="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

    • 使用_2662835中的任何一个：

    • current-password （适用于登录表单）

    • new-password （用于注册和密码更改表单）

    资源

    回复于
  • 5

    从我的测试来看， 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” .

    回复于
  • 0

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

    这是IETF的规范：

    http://www.ietf.org/rfc/rfc3106.txt 1

    回复于
  • 0
    回复于
  • 2

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

    <!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自动填充地址按地址 .

    回复于
  • 37

    这是真正的答案：

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

    所以这就是你需要的：

    • 表单包装器;

    • A <label for="id_of_field">Name</label>

    • 安 <input id="id_of_field"></input>

    而已 .

    回复于
  • 1
    回复于
  • 0

    就我而言， $('#EmailAddress').attr('autocomplete', 'off'); 无效 . 但是以下是由jQuery在chrome Version 67上运行的 .

    $('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
    回复于
  • 169

    以下是Google自动填充“名称”的新列表 . 任何允许的语言都有受支持的名称 .

    autofill_regex_constants.cc

    回复于

相关问题