如何在Safari 7中禁用自动填充

Question

我试图找到一种方法来使Safari 7(使用版本7.0.2,7.0.3测试)尊重autocomplete ="off"属性.无论我尝试什么,它都会继续自动填充.

对于我们设置新用户的管理页面,这是一个问题.我们的用户使用自己的用户名/密码保存.

这是我们正在使用的表单的缩写版本.我已经尝试将字段重命名为"xxu"和"xxp",但自动填充似乎是读取标签标题.我愚弄了各种不同的标签,但它仍然以某种方式触发了自动填充.

<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>

我在Apple的网站上发现了这篇描述这个问题的文章.https://discussions.apple.com/message/25080203#25080203

有没有人知道在Safari 7中禁用表单自动填充的任何其他方法？(唉,这是我们对IE的期望)

谢谢您的帮助.

Answer 1

我们最近遇到了同样的问题.最重要的是,我们对我们的表格进行了AJAX验证.由于一些奇怪的原因,这将触发safari再次自动填充我们的电子邮件输入字段.因此,每次您填写所需的电子邮件时,Safari都会填写一封它首选的电子邮件.让它无法通过我们的形式.

我们的方案

几乎是打破了Safaris(和Chromes)自动填充算法.

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');
}

它的主旨是:我们在Safaris自动填充算法中输入电子邮件和密码类型的输入字段,其名称将更高(或相同？),并将它们隐藏在屏幕之外.在OnSubmit中,字段将被禁用,因此将从POST排除到我们的后端.

缺点是用户不会在我们的表单上自动完成,但我们认为在我们的情况下它是值得的.

注意(假设您关心):禁用Javascript的用户仍会将这些字段包含在他们的POST中.根据您的设置,您需要允许这两个字段进入后端以防止出错.出于安全原因,请确保您不对这些字段执行任何操作!

作为奖励,这解决了Chrome(35)假设密码字段上方的输入字段是用户名的错误.在我们的例子中,它是一个数字字段,给出了奇怪的用户体验和错误.

Answer 2

我选择了@Skurpi提出的douchebag_safari方法的简化版本.它只是HTML,位于表单的底部.

<!-- 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>

Answer 3

你可以试试这个：

如果您能够使用 JavaScript 和 jQuery，您可以将其放在 html 的加载上（body onload）：

$('#theform input').val('');

这个问题类似于：Is autocomplete =“off”与所有现代浏览器兼容吗？

有些浏览器不再支持autocomplete="off"