html - 如何在 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

我们最近遇到了同样的问题。最重要的是，我们在 Blur 上对我们的表单进行了 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 自动填充算法中排名更高(或相同？)的名称，并将它们隐藏在屏幕外。提交时，这些字段将被禁用，因此将被排除在发送到我们后端的 POST 之外。

缺点是用户不会在我们的表单上自动完成，但我们认为在我们的案例中这是值得的。

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

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