How to trigger Autofill in Google Chrome?

2019-01-01 07:53发布

站内问答 / 前端开发
931 10 4

I would like to know if there is some kind of special markup to enable the Chrome autofill feature for a specific form. I only found questions about how to disable it, but I would like to know if I can add some kind of markup to the html code in order to tell the browser "this is the input for the address" or "this is the ZIP code field" to correctly fill it in (assumed the user activated this feature).

10条回答
萌妹纸的霸气范
2楼-- · 2019-01-01 08:24

You need to name the elements appropriately so that the browser will autofill them.

Here's the IETF spec for this:

http://www.ietf.org/rfc/rfc3106.txt1

查看更多
0人赞 添加讨论(0) 举报
皆成旧梦
3楼-- · 2019-01-01 08:25

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人赞 添加讨论(0) 举报
忆尘夕之涩
4楼-- · 2019-01-01 08:35

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人赞 添加讨论(0) 举报
泪湿衣
5楼-- · 2019-01-01 08:37

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人赞 添加讨论(0) 举报
牵手、夕阳
6楼-- · 2019-01-01 08:40

Here is the new list of Google Autofill "names". There are all the supported names in any allowed language.

autofill_regex_constants.cc

查看更多
0人赞 添加讨论(0) 举报
若你有天会懂
7楼-- · 2019-01-01 08:44

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

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

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

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)