I have done a ton of research towards this issue, but I can't seem to find anything that solves my problem.

I have autoplete="off" set on my form tag, and all of my input tags as well, yet Safari continues to input auto saved passwords into my form on page load, which is causing an undesired keydown event on the form in my JavaScript.

Any thoughts? I've tried all sorts of hacks like deleting those input fields from the code entirely, and then using javascript and a setTimeout to insert them into the page after a few seconds, but even after that Safari still throws in its saved passwords to my inputs.

I've also tried using the autocorrect="off" and autocapitalize="off" attributes in my and tags.

I've tried Javascript hacks like so (example):

$(function() {
    $('input').attr('autoplete', 'off');
});

So that every input field on the page on load has this attribute, and yet Safari still inserts its saved passwords into the fields.

Yes, the page is using html5 doctype (Because I know autoplete won't work without it).

Here is my code:

  - form_for @website, :html => {:class => 'fields', :autoplete => 'off'}, :url => {:controller => 'signup', :action => 'connect'} do |form|
    %h3 Enter URL
    %ol.fields
      %li
        = form.label :url, "Website URL:"
        = form.text_field :url, :placeholder => "Website URL", :autoplete => "off", :class => "website_url"
    %h3 Enter Credentials
    - form.fields_for :authentication do |aa|
      %ol.fields
        %li
          = aa.label :hostname, "SFTP/FTP Server:"
          = aa.text_field :hostname, :placeholder => "SFTP", :autoplete => "off"
        %li
          = aa.label :account, "Username:"
          = aa.text_field :account, :placeholder => 'Username', :autoplete => "off"
        %li
          = aa.label :password, "Password:"
          = aa.password_field :password, :placeholder => 'Password', :autoplete => "off"

The above is in haml. It is a ruby application. It is inserting my passwords into the :account input, and the :password input. I have tried wrapping the 'name' part of my :account input in span tags like so:

User<span>n</span>ame

because of the 'name' word being a trigger for autosaved passwords, yet safari still throws its saved passwords into my form after that attempt at solving this.

I would greatly appreciate some new tips I could try. Everything I've found so far for this problem, people just say "use autoplete="off." I am, but it's not working!

Also, I've been testing this with Safari 6.1.2, but have confirmed this strange behavior with older and newer versions of Safari as well. Link to screenshot of browser inspect, so I do know the autoplete="off" attribute is properly being added to the elements: .jpg

I have done a ton of research towards this issue, but I can't seem to find anything that solves my problem.

I have autoplete="off" set on my form tag, and all of my input tags as well, yet Safari continues to input auto saved passwords into my form on page load, which is causing an undesired keydown event on the form in my JavaScript.

Any thoughts? I've tried all sorts of hacks like deleting those input fields from the code entirely, and then using javascript and a setTimeout to insert them into the page after a few seconds, but even after that Safari still throws in its saved passwords to my inputs.

I've also tried using the autocorrect="off" and autocapitalize="off" attributes in my and tags.

I've tried Javascript hacks like so (example):

$(function() {
    $('input').attr('autoplete', 'off');
});

So that every input field on the page on load has this attribute, and yet Safari still inserts its saved passwords into the fields.

Yes, the page is using html5 doctype (Because I know autoplete won't work without it).

Here is my code:

  - form_for @website, :html => {:class => 'fields', :autoplete => 'off'}, :url => {:controller => 'signup', :action => 'connect'} do |form|
    %h3 Enter URL
    %ol.fields
      %li
        = form.label :url, "Website URL:"
        = form.text_field :url, :placeholder => "Website URL", :autoplete => "off", :class => "website_url"
    %h3 Enter Credentials
    - form.fields_for :authentication do |aa|
      %ol.fields
        %li
          = aa.label :hostname, "SFTP/FTP Server:"
          = aa.text_field :hostname, :placeholder => "SFTP", :autoplete => "off"
        %li
          = aa.label :account, "Username:"
          = aa.text_field :account, :placeholder => 'Username', :autoplete => "off"
        %li
          = aa.label :password, "Password:"
          = aa.password_field :password, :placeholder => 'Password', :autoplete => "off"

The above is in haml. It is a ruby application. It is inserting my passwords into the :account input, and the :password input. I have tried wrapping the 'name' part of my :account input in span tags like so:

User<span>n</span>ame

because of the 'name' word being a trigger for autosaved passwords, yet safari still throws its saved passwords into my form after that attempt at solving this.

I would greatly appreciate some new tips I could try. Everything I've found so far for this problem, people just say "use autoplete="off." I am, but it's not working!

Also, I've been testing this with Safari 6.1.2, but have confirmed this strange behavior with older and newer versions of Safari as well. Link to screenshot of browser inspect, so I do know the autoplete="off" attribute is properly being added to the elements: https://i.sstatic/SC0mQ.jpg

• javascript
• jquery
• forms
• autoplete
• safari

• Are you certain that autoplete="off" is being added in the final HTML? – Blazemonger Commented Mar 25, 2014 at 14:19
• Hi, yes when I inspect the elements in Safari, or any other browser, I see that the autoplete="off" attribute is properly on the element. Link to screenshot of browser inspect: imgur./Sgqn7A4 – user1138940 Commented Mar 25, 2014 at 14:33

3 Answers 3

Looks like Safari, and others have decided to stop honoring this attribute.

https://discussions.apple./message/25149138#25149138

http://blog.gerv/2013/10/ie-11-ignoring-autopleteoff

// Override Safari, Chrome and IE11 decision to ignore autoplete: off
// on form you wish to skip autoplete, change all password fields to type=private
// requires jQuery

$(function() {
  $('input[type="private"]').focus(function(e){
    $(this).prop('type', 'password');
  });
  $('input[type="private"]').parents('form').submit(function(){
    $(this).find('input[type="password"]').hide().prop('type', 'private');
  });
});

In Mac Safari does not respect autoplete="off" into tags. It looks for bination of email and password and fills them automatically.

As I had the same problem where I have two fields.

<input type="text" name="email" id="email" value="" placeholder="Enter Email">
<input type="password" name="password" id="password" value="" placeholder="Enter Password">

As safari looks for bination of text and password in this case for autofill the fields with values saved in browser cookies.

You just need to do two things.

<input type="password" name="email" id="email" value="" placeholder="Enter Email" onfocus="this.type='text'">

1. Change email field type to password instead of text when form loads or page loads.
2. For onfocus event with javascript change type for field to be text which is required.

This is just a hack.If anyone else have better solution please post.

@t_itchy's solution fails in Firefox, as it initially prevents the value from being entered, but as soon as you give a password field focus, the password is added to it. The following solution is edited from his, and manipulates the maxlength property to prevent the password from being present. Further, since Firefox behaves oddly when blurring a password field, it also reverts the password field to private on blur if it is empty.

// Override Safari, Chrome and IE11 decision to ignore autoplete: off
// on form you wish to skip autoplete, change all password fields to type=private
// requires jQuery

// External function for removing maxlength restriction - apparently required
function removemaxlength(me) {
    window.setTimeout(function() {me.prop('maxlength',100)},100);
}

$(function() {
    $('input[type="private"]').focus(function(e){
        $(this).prop('maxlength',0).prop('type', 'password');
        removemaxlength($(this));
    }).blur(function(e){ // When leaving an empty field ONLY, revert to private
        if (!$(this).val()) $(this).prop('type', 'private');
    });
    // This appears unnecessary, left as ment for pleteness
    // $('input[type="private"]').parents('form').submit(function(){
    //  $(this).find('input[type="password"]').hide().prop('type', 'private');
    // });
});