DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Measuring the Impact of Autofill on Your Forms

Paul Kinlan provides a call and case for browser standardization and measurement in terms of how they relate to autocomplete.

Paul Kinlan user avatar by
Paul Kinlan
·
Oct. 18, 16 · Opinion
Like (4)
Save
Tweet
Share
1.95K Views

Join the DZone community and get the full member experience.

Join For Free

Autofill has a checkered history filled with what I believe is a mild case of FUD. Chrome, for the longest time, decided to ignore on forms and fields because we believed that autocomplete provides a huge amount of value for users especially in the context of mobile.

One problem is that it is incredibly hard to measure how impactful autocomplete is to your site. There aren’t really any events that happen when “autocomplete” occurs, so how do you measure what has happened?

I think there is a way, but it is not consistent across browsers.

Webkit and Blink Engines (Chrome, Samsung and Opera)

For a long time, WebKit had a pseudo class called -webkit-autofill that was applied to input elements. When the Chrome team forked WebKit and turned it into the blink engine, they also inherited this feature.

The -webkit-autofill pseudo class was designed to let you style and override the default “yellow” highlight when the browser executes the autofill. It is possible to use this pseudo selector to find all elements that have it applied using a simple document.querySelectorAll call as follows:

document.querySelectorAll('input:-webkit-autofill');

Likewise, you can listen to the input event on the input elements (or even on the document) and check to see if the event target would match the selector, as seen below:

[code: js]

document.addEventListener('input', function(e) {
var element = e.target.matches(':-webkit-autofill');
if(element) {
// Field auto-completed - Send an analytics event (or whatnot)
}
});

This works consistently across all WebKit and blink-based browsers. However, Mozilla hasn’t implemented it. There are numerous StackOverflow answers that suggest that :-moz-autofill works. But it doesn’t.

There was also a thread a while ago to standardize this, but no action has been taken.

If you are searching for autocomplete, you will also see an API called requestAutoComplete. It even has a handy onautocomplete event that is called when, well, the field is auto-filled. The problem is that this API is all but deprecated. I would love to see onautocomplete as an event that is triggered when the browser automatically fills the field. It is a very nice convenient function.

But the question still remains, how do you do this in Firefox and browsers that don’t support:-webkit-autofill?

Great question!

After some research that involved me crafting some simple tools for Firefox DevTools (I needed to be able to listen to all events happening on an element so I had to create a monitorEvents shim). Likewise, I had to also work out a way to find when an Element was created, so I ended up making a utility to resolve a promise when an element is added to the DOM. I think I have found a way to detect autocomplete in Firefox (and consistently across all other browsers).

What I found was that the oninput event will fire without any other events invoked, so there is no onkeypress, onkeyup, etc. I think there can be some false positives, but the signals look good.

var registerOnAutoComplete = function(elementSelector) {
return new Promise(function(resolve, reject) {
var element = document.querySelector(elementSelector);
var hasKeyInteraction = false;
element.addEventListener("input", function(e) {
if(hasKeyInteraction === false) {
resolve(e.target);
}
});
element.addEventListener("keydown", function(e) {
// If there is a keyboard interaction then we believe it is not autocomplete
hasKeyInteraction = true;
});
});
};

Usage is pretty simple for individual elements.

<script>
registerOnAutoComplete("input[]").then((element) => {
// Send some analytics data.
});
registerOnAutoComplete("input[]").then((element) => {
// Send some analytics data.
});
</script>
<form>
<input type="email" name="email">
<input type="password" name="password">
</form>

I think this is pretty interesting, as you can get data on which fields have been autofilled by the browser. However, you have to register for an event on them. This is why I really like the idea of a customonautocomplete event that as a developer I can listen for, or, if necessary, prevent.

I am going to do a couple more experiments because I would also like to register this once at the<form> level and I would like to get feedback to see if developers at large think this is as useful as I do.

My goal is to prove that autocomplete is a massive net-positive for users and businesses, but to do that we need to be able to measure it.

What Next?

I would really like this to be properly standardized, meaning:

  • Standardize and implement :autofill - CSS pseudo class so I can style but also select.

  • Rip out onautocomplete from the requestAutoComplete spec and trigger it when the browser actually autocomplete.

  • Allow the developer to preventDefault on onautocomplete if they have a better idea about what the data should be.

Event Form (document)

Published at DZone with permission of Paul Kinlan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Type Variance in Java and Kotlin
  • Top Five Tools for AI-based Test Automation
  • Unleashing the Power of JavaScript Modules: A Beginner’s Guide
  • Distributed SQL: An Alternative to Database Sharding

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: