How can I stop Safari from loading in the email field with the wrong email address?

Question

Contact management software allows users to add the contact details of their friends to their account.

One of the details you can add is the "email address". However, for some reason, Safari's email address field gets auto-complete with the user's own email address, which they use to log in. This does not happen if you disable the "auto-complete" option in the "preferences" section, but this solution obviously does not work for all of our users.

I tried adding autocomplete="off" , but it seems that this is simply ignored by Safari.

Here are two fields:

Login field:

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

Inner field:

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

I cannot understand why Safari even thinks that it is one and the same. They have different identifiers and names.

How can i stop this? Preferably without hacker workarounds similar to those offered here .

Answer 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 Safari version is 5.2 or higher. It is mentioned at w3schools.com

Answer 2

Set AUTOCOMPLETE = off in the form tag.

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

Check this. Change the type for text to email

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

Answer 3

Using the autocomplete = "off" tag in the form

and yet, if it doesn’t work, this is because autocomplete = "off" is not valid markup with the XHTML Transitional, which is a normal DOC type. Use this to keep 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"); } } } 

Answer 4

Apparently, the off / on state is still incorrectly implemented in all browsers. However, for most browsers, an “invalid” value appears to produce the desired “off” effect.

Try the following:

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