html - How to disable auto-fill in Safari 7

Question

I'm trying to find a way to make Safari 7 (tested with version 7.0.2, 7.0.3) respect the autocomplete="off" attributes. No matter what I try, it continues to auto-fill.

This is a problem for one of our admin pages where we set up new users. Our users keep saving over with their own username/password.

Here's an abbreviated version of the form we're using. I've tried renaming the fields to "xxu" and "xxp" but the autofill seems to read the label caption. I've fooled with various different labels but it still somehow triggers the auto-fill.

<form novalidate autocomplete="off">
     <div class="control-group">
          <label class="control-label">Username</label>
          <div class="controls">
               <input type="text" name="xxu" autocomplete="off" required="required">
        </div>
     </div>
     <div class="control-group">
          <label class="control-label">Username</label>
          <div class="controls">
               <input type="password" name="xxp" autocomplete="off" required="required">
        </div>
     </div>
</form>

I found this article on Apple's site that describes this problem. https://discussions.apple.com/message/25080203#25080203

Does anyone know of any other method for disabling auto-fill for a form in Safari 7? (Agh, this is the kind of thing we'd expect from IE)

Thanks for the help.

Answer 1

We had the same problem recently. On top of that, we had a AJAX validation of our form happening onBlur. For some strange reason, this would trigger safari to autofill our email input field again. So every time you fill in the email that you want, Safari would fill in an email that it preferred instead. Making it impossible to go through our form.

Our solution

was to pretty much break Safaris (and Chromes) autofill algorithm.

HTML:

<div class="douchebag_safari">
    <input class="js-clear_field" tabindex="-1" name="e-mail" type="email">
    <input class="js-clear_field" tabindex="-1" name="Ecom_User_Password" type="password">
</div>

CSS:

.douchebag_safari {
    position: fixed;
    width: 1px;
    left: -50px;
}
.douchebag_safari input {
    width: 1%;
}

JS:

$('#form').on('submit', function () {
    "use strict";
    $('.js-clear_field').attr('disabled', 'disabled');
}

The jist of it is: We put input fields of type email and password with names that will rank higher (or same?) in Safaris autofill algorithm and hide them outside the screen. OnSubmit, the fields will be disabled and will thus be excluded from the POST to our backend.

The downside is that users won't have autocomplete on our form, but we decided that it was worth it in our case.

NOTE (assuming you care): Users with Javascript disabled will still get these fields included in their POSTs. Depending on your setup, you will need to allow these two fields to come through to your backend to prevent errors. Just make sure you don't do anything with these fields for security reasons!

As a bonus, this solved a bug where Chrome (35) assumed the input field above the password field is the username. In our case, it was a number field, giving strange user experience and bugs.