How to Trigger Autofill in Google Chrome

How to trigger Autofill in Google Chrome?

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

What does trigger Chrome Address Autofill Popup using Angular Material

You can add the 'name' attribute to your inputs. See this link for usable values. The browser basically guesses at what values to provide for the autocomplete based on the 'name' attribute you add.

When are forms autofilled in Chrome?

When you log into a new site chrome will drop down its notification bar at the top and ask you if you want to save the password, if you tell it "Never" it wont ask again and it wont ever autofill

To get form fields to autofill like street, address, etc, a good answer by kmote

How to trigger Autofill in Google Chrome?,

Chrome Autofill triggering separately for billing and contact information

Fixed it by removing the word billing from autocomplete values and bill- from name values.

E.g.

Before autocomplete="billing postal-code" name="zip"

Before autocomplete="postal-code" name="zip"

Changing the autocomplete field alone proved to be enough.

This is part of a code to auto-fill a web-page in google chrome (using console), What programming language is it?

It's jQuery.

$ is an alias for jQuery, and after $ follows the element selecting query.

Example:
$("#LoginButton") is the same like getElementById("LoginButton").

Example 2:
$("#LoginButton").trigger("click"); triggers a click event on the login button element in the DOM.



Related Topics



Leave a reply



Submit