Safari 保存的密码覆盖表单中的 autocomplete="off"

Question

我对这个问题进行了大量研究，但似乎找不到任何可以解决我的问题的方法。

我在表单标签和所有输入标签上都设置了 autocomplete="off"，但是 Safari 继续在页面加载时将自动保存的密码输入到我的表单中，这会导致表单上出现不希望的 keydown 事件在我的 JavaScript 中。

有什么想法吗？我已经尝试过各种技巧，比如完全从代码中删除这些输入字段，然后在几秒钟后使用 javascript 和 setTimeout 将它们插入页面，但即使在那之后，Safari 仍然会将其保存的密码输入到我的输入中.

我还尝试在我的 and 标记中使用 autocorrect="off" 和 autocapitalize="off" 属性。

我已经尝试过这样的 Javascript hack（示例）：

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

因此加载页面上的每个输入字段都具有此属性，但 Safari 仍会将其保存的密码插入到字段中。

是的，该页面使用的是 html5 文档类型（因为我知道没有它，自动完成功能将无法工作）。

这是我的代码：

  - form_for @website, :html => {:class => 'fields', :autocomplete => '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", :autocomplete => "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", :autocomplete => "off"
        %li
          = aa.label :account, "Username:"
          = aa.text_field :account, :placeholder => 'Username', :autocomplete => "off"
        %li
          = aa.label :password, "Password:"
          = aa.password_field :password, :placeholder => 'Password', :autocomplete => "off"

以上是haml。这是一个红宝石应用程序。它将我的密码插入 :account 输入和 :password 输入。我尝试将我的 :account 输入的“名称”部分包装在跨度标签中，如下所示：

User<span>n</span>ame

因为“名称”字是自动保存密码的触发器，但在尝试解决此问题后，safari 仍会将其保存的密码放入我的表单中。

非常感谢我可以尝试的一些新技巧。到目前为止我为这个问题找到的所有东西，人们只是说“使用自动完成=关闭。”我是，但它不起作用！

另外，我一直在使用 Safari 6.1.2 对此进行测试，但在新旧版本的 Safari 中也证实了这种奇怪的行为。链接到浏览器检查的屏幕截图，所以我知道 autocomplete="off" 属性已正确添加到元素中：http://imgur.com/Sgqn7A4

Answer 1

看起来像 Safari，其他人已决定停止使用此属性。

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

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

// Override Safari, Chrome and IE11 decision to ignore autocomplete: off
// on form you wish to skip autocomplete, 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');
  });
});

Answer 2

在 Mac 中，Safari 不尊重 autocomplete="off" 进入标签。它查找电子邮件和密码的组合并自动填充它们。

因为我有两个字段时遇到了同样的问题。

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

在这种情况下，Safari 会寻找文本和密码的组合，以便使用保存在浏览器 cookie 中的值自动填充字段。

你只需要做两件事。

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

1. 在表单加载或页面加载时将电子邮件字段类型更改为密码而不是文本。
2. 对于 onfocus 事件，使用 javascript 将字段类型更改为必需的文本。

这只是一个hack。如果其他人有更好的解决方案，请发布。

Answer 3

@t_itchy 的解决方案在 Firefox 中失败，因为它最初会阻止输入值，但是一旦您给出密码字段焦点，密码就会添加到其中。以下解决方案是根据他的编辑，并操纵maxlength 属性以防止密码出现。此外，由于 Firefox 在模糊密码字段时表现异常，如果密码字段为空，它还会在模糊时将密码字段恢复为私有。

// Override Safari, Chrome and IE11 decision to ignore autocomplete: off
// on form you wish to skip autocomplete, 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 comment for completeness
    // $('input[type="private"]').parents('form').submit(function(){
    //  $(this).find('input[type="password"]').hide().prop('type', 'private');
    // });
});