6

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.

Urbycoz
  • 7,247
  • 20
  • 70
  • 108
  • How does autocomplete even come into play here, when you supplied the value for the input field in your HTML code already (`value="test@test.com"`) …? – CBroe Feb 15 '18 at 09:49
  • @CBroe. Sorry- typo. I'll fix it. – Urbycoz Feb 15 '18 at 09:51
  • 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. – Barkermn01 Feb 22 '18 at 12:39
  • 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. – scooterlord Feb 22 '18 at 13:45
  • 3
    Does [this answer](https://stackoverflow.com/a/23016234/3389737) not work? – Luke Feb 22 '18 at 21:42
  • @Luke Thanks, I might need to resort to this kind of approach. It seems like a bit of a workaround though. – Urbycoz Mar 01 '18 at 12:28
  • @scooterlord Do you know if it's the id or the name of the field that it finds the word "email"? – Urbycoz Mar 01 '18 at 12:30
  • @MartinBarker No I haven't got any extensions installed. – Urbycoz Mar 01 '18 at 12:34
  • 1
    @Urbycoz It's for every attribute: id, name...even placeholder. – scooterlord Mar 01 '18 at 14:05

6 Answers6

0

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">
Mittal Patel
  • 2,732
  • 14
  • 23
0

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”);

}

}

}
JPZ
  • 1,360
  • 1
  • 9
  • 14
0

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">
Asesjix
  • 3,891
  • 3
  • 16
  • 19
0

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

Таня Чичигинарова
  • 1
  • 1
0

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

MMore
  • 375
  • 3
  • 12
-1

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