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.

---

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.

---

I went with a simplified variation of the douchebag_safari approach that @Skurpi came up with. It's HTML only and goes at the bottom of my form.

<!-- http://stackoverflow.com/questions/22817801/how-to-disable-auto-fill-in-safari-7 -->
<div class="douchebag_safari" style="left: -9999px; position: fixed; width: 1px;">
    <input type="password">
</div>

---

I found a quicker and simple way to avoid the form autocompleting. It works in FF 27, Chrome 36 and Safari 7.0.5 on a Mac. I still have not tested it in other OS.

I simply put a fake field as the first place in my form, no need for label or id and name attributes. I hid it for instance with an inline style and voilà!

<input type="password" style="display: none">

The email and password fields in my form are filled with the values from the database as expected and not getting autocompleted anymore.

To be honest, I don't like this solution either... I would love to find a compatible and standard solution but seems that autocomplete="off" is not working anymore.

链接地址: http://www.djcxy.com/p/26454.html

上一篇: autocomplete属性没有通过XHTML 1.0 Transitional验证，为什么？

下一篇: 填写Safari 7