5

I have a form on my site which happens to have an email field followed by a password field. Safari is filling them out as if they are a sign in form, which they are not. The values previously set in the email input is deleted, which is a problem, and Safari is putting in a username which is not a valid email, which ruins the form.

I tried adding autocomplete="off", but Safari just ignores it. How can I convince it that this is not a login screen, and to please stop meddling?

Edit: I just tried moving the order of the form to help Safari realize that it's not a login form, and it still fills it out, even when the password field is at the very top, and the email field is at the very bottom (5 fields down).

2 Answers2

5

This solution works for disabling autocomplete in Safari:

If you want to disable password autocomplete on all forms, use:

::-webkit-credentials-auto-fill-button {
     visibility: hidden;
}

If you want to disable for only one form, use:

.put_your_class_here::-webkit-credentials-auto-fill-button {
     visibility: hidden;
}
Ulysnep
  • 395
  • 4
  • 12
1

You can visit this post as it also has information about disabling autocomplete on a form. Try running the same HTML page on more than one browser as it could be Safari and its settings that is causing this. Also, Mozilla has a helpful post about autocomplete that's worth looking at here. If this is still not helping, please post some comments.

Community
  • 1
  • 1
Razor
  • 1,778
  • 4
  • 19
  • 36
  • Tried it on Chrome and Firefox, it only happens on Safari though. The link you posted suggests using the `autocomplete` attribute, which doesn't work on any major browsers anymore. –  Mar 13 '16 at 19:08
  • 2
    Setting the `autocomplete` attribute to a random string also didn't work unfortunately. –  Mar 13 '16 at 19:12
  • Also, have you tried putting autocomplete="off" onto each individual input tag that you have within the form? – Razor Mar 14 '16 at 12:42
  • What does your form actually look like in HTML? – Razor Mar 17 '16 at 10:26
  • 1
    I have just found out that Safari searches for words like Email and Password in a form and enables autocomplete. If there are different names like Code or Address, Safari won't apply autocomplete. – Razor Mar 18 '16 at 07:59
  • Regarding Hassan's comment, I just had a problem with phone autocomplete, and using `autocomplete="home mobile work tel"` fixed it. I'm not entirely sure that more than one of the number type tokens is legal, but it did allow Safari to use all three number types, where it wouldn't fill a number before. It seems `autocomplete` is not a dead attribute after all. – Brandon Aug 04 '17 at 20:40