Disabling Safari AutoFill for a single line address input
Filling out a form on mobile is tedious — as the user jumps from input to input, the previous information entered becomes out of view and difficult to return to. In an effort to simplify the address collection process, we are moving away from asking the user to enter each item of their address into a separate input. Instead, we collect their entire address in a single input, similar to the way the Google Maps works.
Although AutoFill (or Autocomplete, depending on what the browser calls it) is designed to assuage the original concern of filling multiple inputs, it does not behave well when those inputs are combined. In our case, when we ask the user to provide a street address, city, and state in a single input, AutoFill only populates the field with one of the values.
So how does this look in code?
For simplicity sake, let’s assume that our input tag is defined as such:
<input placeholder=”Street address, city, state” />Safari will populate the input with the user’s stored state, “GA”, when the user was expecting it to populate it with “123 Main St, Atlanta, GA”.
How AutoFill should be respected
This problem exists in all browsers. Currently, no browser AutoFill can neatly concatenate multiple address pieces into a single input. However, the solution for these browsers is more straightforward and documented. In Chrome and Firefox, you can thwart attempts to auto fill by setting the input type equal to “search” and autocomplete to “off”.
<input type=”search” autocomplete=”off” />Why can’t Safari be this simple?
How Safari AutoFill works (or doesn’t)
After some trial-and-error investigation and experimentation, we found that Safari’s AutoFill makes a best attempt effort to determine which AutoFill field it should populate the input with. Safari evaluates the input’s attributes in this order: name, placeholder, and label. If Safari finds that the name does not contain any of the keywords, it will fall back to the placeholder text and so on.
In the example below, Safari will infer “State” as the AutoFill value.
<label>
Address <input type=“search” placeholder=“City” name=“state” /></label>
If multiple values exists it will use the last value — in this case, “State”.
<label>
Address <input type=“search” placeholder=“City, State” /></label>
Past solutions
Up until version 7, Safari used to respect the value of the autocomplete attribute, so setting it to “off” would work. Most modern browsers now choose to ignore the value of autocomplete, so this solution no longer works. You can find the full table of autocomplete support here.
<input autocomplete=”off” placeholder=”Street address, city, state” />Another option was to set autocomplete to an invalid value, such as “false”. This works in some browsers because the browser can’t interpret the value, so it does not attempt to show AutoFill.
<input autocomplete=”false” placeholder=”Street address, city, state” />If you don’t want to use a name attribute, another approach is to insert the equivalent unicode characters into your placeholder.
placeholder={‘Enter an ‘ + ‘\u0430’ + ‘ddress’}But you can see how this gets out of hand:
placeholder={‘Stre\u0435t addr\u0435ss, \u03F2ity, st\u0430te’}You should also be aware that this makes your site less accessible to vision-impaired users as screen readers will be unable to correctly read the placeholder text.
Our solution
We didn’t have a label element, just an input with a placeholder value. Our solution was to add a name attribute with the word “search” in it. Safari considers “search” a valid AutoFIll value and maps it to an input that does not require AutoFIll, so it doesn’t attempt to check the values for placeholder or label. We were unable to find a Safari AutoFIll regex list ,such as the AutoFill Regex provided by Chrome. We cannot say which values other than “search” would prevent AutoFill from showing.
<input type=“search” autocomplete=“off” placeholder=“Street address, city, state” name=“searchTerm” />TL;DR
Inserting text with the word “search” into the name attribute will prevent Safari from showing the AutoFill icon and keyboard option. This works because Safari performs a regex and maps “search” to an input that does not require the AutoFill.
<input name=”notASearchField” />Special thanks to Jennifer Mak for her help discovering this solution.
Further reading
Do you want to learn more about opportunities with our team? Visit theGrubhub careers page.
