This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>Autofill has a chequered history filled with what I believe is a mild case of
FUD. Chrome for the longest time decided to ignore <code>autocomplete=off</code> on forms
and fields because we believed that autocomplete provides a huge amount of value
for users especially in the context of mobile.</p>
<p>One of the problems is that is incredibly hard to measure how impactful
autocomplete is to your site. There aren't really any events that happens
when "autocomplete" occurs, so how do you measure what you tell has happened?</p>
<p>I think there is a way, but it is not consitent across browsers.</p>
<h3 id="webkit-and-blink-engines-chrome-samsung-and-opera">WebKit and Blink engines (Chrome, Samsung and Opera...)</h3>
<p>For a long time, WebKit had a pseudo class call <code>-webkit-autofill</code> that will be
applied to input elements that. When the Chrome team forked WebKit and turned
it into the blink engine they also inherited this feature.</p>
<p>The <code>-webkit-autofill</code> 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 <code>document.querySelectorAll</code> call as follows:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">document.<span style="color:#a6e22e">querySelectorAll</span>(<span style="color:#e6db74">'input:-webkit-autofill'</span>);
</code></pre></div><p>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:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">document.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">'input'</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>) {
<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">element</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">matches</span>(<span style="color:#e6db74">':-webkit-autofill'</span>);
<span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">element</span>) {
<span style="color:#75715e">// Field auto-completed - Send an analytics event (or whatnot)
</span><span style="color:#75715e"></span> }
});
</code></pre></div><p>This works consistently across all WebKit and blink based browsers, however
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla haven't implemented it</a>.
There are numerous StackOverflow answers that suggest <code>:-moz-autofill</code> works,
it doesn't.</p>
<p>There was also a thread a while ago to standardize this, but no action has been
taken.</p>
<p>If you are searching for <code>autocomplete</code> you will also see an API called
<code>requestAutoComplete</code>, it even has a handy <code>onautocomplete</code> event that is called
when, well, the field is auto-filled. The problem is that his API is all but
deprecated. I would love to see <code>onautocomplete</code> as an event that is triggered
when the browser automatically fills the field. It is a very nice convenience
function.</p>
<p>But the question still remains, how do you do this in Firefox and browsers that
don't support <code>:-webkit-autofill</code>?</p>
<p>Great question!</p>
<p>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 <a href="https://paul.kinlan.me/monitoring-all-events-on-an-element/"><code>monitorEvents</code></a> shim.
Likewise, I had to also work out a way to find when an Element was created so
I ended up making a <a href="https://paul.kinlan.me/waiting-for-an-element-to-be-created/">utility to resolve a promise when an element is added
to the DOM</a>), I think I have found
a way to detect autocomplete in Firefox (and consistently across all other
browsers).</p>
<p>What I found was that the <code>oninput</code> event will fire without any other events
be invoked, so there is no <code>onkeypress</code>, <code>onkeyup</code> etc. I think there can be
some false positives but the signals look good.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">registerOnAutoComplete</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">elementSelector</span>) {
<span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> Promise(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">resolve</span>, <span style="color:#a6e22e">reject</span>) {
<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">element</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#a6e22e">elementSelector</span>);
<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">hasKeyInteraction</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>;
<span style="color:#a6e22e">element</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">"input"</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>) {
<span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">hasKeyInteraction</span> <span style="color:#f92672">===</span> <span style="color:#66d9ef">false</span>) {
<span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">target</span>);
}
});
<span style="color:#a6e22e">element</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">"keydown"</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>) {
<span style="color:#75715e">// If there is a keyboard interaction then we believe it is not autocomplete
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">hasKeyInteraction</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>;
});
});
};
</code></pre></div><p>Usage is pretty simple for individual elements.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html"><<span style="color:#f92672">script</span>>
<span style="color:#a6e22e">registerOnAutoComplete</span>(<span style="color:#e6db74">"input[name=email]"</span>).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">element</span>) => {
<span style="color:#75715e">// Send some analytics data.
</span><span style="color:#75715e"></span> });
<span style="color:#a6e22e">registerOnAutoComplete</span>(<span style="color:#e6db74">"input[name=password]"</span>).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">element</span>) => {
<span style="color:#75715e">// Send some analytics data.
</span><span style="color:#75715e"></span> });
</<span style="color:#f92672">script</span>>
<<span style="color:#f92672">form</span>>
<<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"email"</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">"email"</span>>
<<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"password"</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">"password"</span>>
</<span style="color:#f92672">form</span>>
</code></pre></div><p>I think this is pretty interesting, you can get data on which fields have been
autofilled by the browser but you have to register for an event on them. This
is why I really like the idea of a custom <code>onautocomplete</code> event that as a
developer I can listen for, or if necessary prevent.</p>
<p>I am going to do a couple more experiments, because I would also like to
register this once at the <code><form></code> level and I would like to get feedback on
if developers at large think this is as useful as I do.</p>
<p>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.</p>
<h4 id="what-next">What next?</h4>
<p>I would really like this to be properly standardized, that is:</p>
<ol>
<li>Standardize and implement<code>:autofill</code> - CSS pseudo class so I can style but
also select.</li>
<li>Rip out <code>onautocomplete</code> from the requestAutoComplete spec and trigger it
when the browser actually autocomplete</li>
<li>allow the developer to preventDefault on <code>onautocomplete</code> if they have a
better idea about what the data should be.</li>
</ol>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
