Hi all, autofill is a great feature, but it really needs to be better standardized.
Here's a problem we're trying to solve right now, we have an input field that is used to filter a list of items. Here's it's HTML
<input type="text" class="sdt-defaultfilter sdt-filtertxt" placeholder="Enter file name, user name or type...">
The text in the placeholder is important because Safari, and only Safari, is trying to be smart and by parsing the text it determines that this field is used for login and automatically pastes my email address from saved credentials. As a result the items are filtered by this email and will mostly show an empty list so each time user opens a directory he needs to empty the filter value to see the content.
I've already tried:
- putting the message into separate element and then rendering it over the input field in a span and event than Safari figuered it out
- changing the input's type to search
- autocomplete="off" - which is of course ignorred, even tried a autocomplete="filename"
- combining all above
Changing the message to one that does not include a "user name" or username string helps, but that is not a solution.
Actually only thing that really works is honeypotting the autofill on an user-invisible input field defined before the problematic one:
<input type="text"
class="autocomplete-honeypot"
style="float: left; display: inline-block; width: 0; height: 0; padding: 0; margin: -1px; border-width: 1px; border-color: transparent;"
autocomplete="username"
placeholder="Enter file name, user name or type..." />
However this solution is far from being elegant and I'm still searching for a more official, non-hacking one. Can anyone help me with that?
Sierra 10.12.4
Safari Version 10.1(12603.1.30.0.34)
UPDATE
Somehow the solution stopped working after the weekend. New way is to render the honeypot field visibly outside the viewport so now I'm using this updated css class:
.autocomplete-honeypot {
float: left;
display: inline-block;
padding: 0;
position: absolute;
left: -5000px;
top: -5000px;
margin: -1px;
border: 1px transparent;
}