How can I stop Safari autofilling the email field with the wrong email?

Question

Our contact-management software enables users to add contact details for their friends to their account.

One of the details you can add is "email address". However for some reason on Safari the email address field gets autofilled with the user's own email address that they use to log in. It doesn't happen if you turn off the "autofill" option under "preferences", but that's obviously not a workable solution for all our users.

I've tried adding autocomplete="off" but it seems that this is just ignored by Safari.

Here are the two fields:

Login Field:

<input type="email" class="input-block-level" placeholder="Email address" name="email" id="user_email">

Internal Field:

 <input type="text" id="pri_email" autocomplete="off" name="pri_email">

What I can't understand is why Safari even thinks they are the same thing. They have different ids and names.

How can I stop this from happening? Preferably without hacky work-arounds like the ones suggested here.

Crist

How does autocomplete even come into play here, when you supplied the value for the input field in your HTML code already (value="[email protected]") …? – Legible

@CBroe. Sorry- typo. I'll fix it. – Crist

Are you sure you don't have something else (like an extension) installed in your browser auto-completing form fields for you? Normal safari autocomplete is the same as chromes for me it gives me a drop down of options. this sounds more like you have a script firing from an extension using javascript field.value = "some value"; especially if value="" is set on the HTML. – Roxane

The reason this happens is because Safari captures any instance of the word email in the input, whether it's on the name, the type, or even the placeholder. – Meganmeganthropus

Does this answer not work? – Collimate

@Collimate Thanks, I might need to resort to this kind of approach. It seems like a bit of a workaround though. – Crist

@Meganmeganthropus Do you know if it's the id or the name of the field that it finds the word "email"? – Crist

@MartinBarker No I haven't got any extensions installed. – Crist

@Crist It's for every attribute: id, name...even placeholder. – Meganmeganthropus

Answer 1

Luckily there is an "easy" solution.

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” />

Source: https://bytes.grubhub.com/disabling-safari-autofill-for-a-single-line-address-input-b83137b5b1c7

Hypogeal

thx... it's crazy the things we have to do for safari.. I found out that email is detected not even in input name and class, but in the body text before the input.. The search solution works perfectly, thanks – Aftertime

Answer 2

Set AUTOCOMPLETE = off in the form tag.

<FORM METHOD="POST" ACTION="" AUTOCOMPLETE="off">

Check this one - Change the type for text to email

 <input type="email" id="pri_email" autocomplete="off" name="pri_email">

Osgood

Answer 3

Use in the tag form autocomplete=”off”

and still if not works it is because autocomplete=”off” is not valid markup with XHTML Transitional, that is common DOC TYPE. Use this to keep a valid markups try this.

if (document.getElementsByTagName) {

var inputElements = document.getElementsByTagName(“input”);

for (i=0; inputElements[i]; i++) {

if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {

inputElements[i].setAttribute(“autocomplete”,”off”);

}

}

}

Shelf

Answer 4

Apparently, the state off / on is still not correctly implemented in all browsers. However, for most browsers, an "invalid" value seems to produce the desired effect of "off".

Try this:

<input type="text" id="pri_email" autocomplete="nope" name="pri_email">

Chlo

Answer 5

it works with fake input:

<input autocomplete="off" type="text"  name="email">
<input type="text" name="fake_email" id="fake_email" style="height: 0px; width: 0px; overflow: hidden;" tab-index="-1" aria-hidden="true">

autofill single field email in Safari (ios) does not working

Magaretmagas

Answer 6

you can use

<input type="email" class="input-block-level" placeholder="Email address" name="email" id="user_email" value="">

The reason is that safari ignores autocomplete. It will accept it if the version of Safari is 5.2 or higher. It is mentioned on w3schools.com

Schaab

I'm using Safari v11.0.3 but I'm still getting it. – Crist

So, you can use the value attribute. – Schaab

It still autofills even when I include the value attribute. – Crist

I don't know much about safari. Is safari available for windows 8. If it is so, then I'll download it then I will search for the answer. – Schaab

I don't think it is. Thanks anyway. – Crist

I am very sorry that I couldn't help you. Should I delete this post? – Schaab

Don't ever trust w3schools. – Imamate