Html 禁用对用户名和密码的Safari自动填充

您可能已经知道，Safari有一个严重的自动填充错误，无论您是否设置了

autocomplete=“off”

，它都会填充电子邮件、用户名和密码字段

以下是一个基本形式：

<form action="/" method="post">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" />
    </p>
</form>

即使这样也不行：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="secretfield1" value="" autocomplete="off"/>
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="secretfield2" value="" autocomplete="off" />
    </p>
</form>

电子邮件


密码

…因为Safari会查找那些

元素，如果它们包含单词“E-mail”、“Password”等，然后进行自动填充

啊啊啊哈！，我想了想，试了一下：

<form action="/" method="post" autocomplete="off">
    <p>
        <label>%REPLACE_EMAIL_TITLE%</label>
        <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/>
    </p>
    <p>
        <label>%REPLACE_PASSWORD_TITLE%</label>
        <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" />
    </p>
</form>

%替换\u电子邮件\u标题%


%替换\u密码\u标题%

…并使用JavaScript将%TAGS%替换为真实名称。Safari自动填充开始了。无论您是否为替换设置了10秒超时

那么，这真的是唯一的选择吗

<form action="/" method="post" autocomplete="off">
    <p>
        <label>That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on</label>
        <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/>
    </p>
    <p>
        <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks</label>
        <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" />
    </p>
</form>

我们都使用的电子邮政地址，但不能在这里写标题，因为如果您启用了“自动填充”，Safari会用您的信息填充此地址


一组非常秘密的字符、字母、数字和特殊字符，只有你或你要更改它的用户知道，但不能在这里写标题，因为Safari太差劲了

我希望不是

更新：，其中提到“登录自动填充”。有人知道这个更新会不会解决这个问题吗？

在扫描了一遍之后，在auto complete上找不到任何东西，我做了一些搜索和思考

在阅读了苹果的讨论之后，我记得默认设置是不允许记住密码等（可以在iDevice系统设置中启用，也可以在提示下启用）。由于苹果已经将这一功能从浏览器中移出，进入了他们的（专有的，i）操作系统（），我相信他们完全忽略了HTML表单/字段属性

除非他们改变对这一特性的想法，我相信这是他们在锁定设备上的预期行为，否则我会假设这不会消失。这可能与本机iOS应用程序不同。一定要将表单autocomplete=“off”和用于该功能

---

我知道这不包括任何解决方法，但我认为如果你接受它是iDevices上的非浏览器“功能”，它是有意义的（以苹果的方式）。

我也有同样的问题。虽然我的解决方案并不完美，但似乎有效。基本上，Safari似乎在寻找一个带有密码和用户名的输入字段，并总是尝试填充它。因此，我的解决方案是在Safari可以填充的当前字段之前添加一个假用户名和密码字段。我尝试使用

style=“display:none；”“

，但没有成功。最后，我使用了

style=“position:absolute；top:-50px；”

将输入字段隐藏在看不见的地方，似乎工作正常。我不想使用JavaScript，但我想你可以用JavaScript隐藏它

---

现在Safari从未自动完成我的用户名和密码字段。

修复：浏览器以只读模式自动填写，并将焦点设置为可写

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

（焦点=鼠标单击并在字段间切换）

更新： Mobile Safari在字段中设置光标，但不显示虚拟键盘。新的修复程序与以前一样工作，但可处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示

//更新

说明：浏览器自动将凭据填充到错误的文本字段？

好的，你刚刚注意到：

Safari自动填充开始了。不管[字段名是什么]@Jari

还有一个假设是：

Safari似乎在寻找一个带有密码和用户名的输入字段，并且总是试图在user3172174处填充它

有时我会在Chrome和Safari上注意到这种奇怪的行为，当有相同形式的密码字段时。我猜，浏览器会查找密码字段以插入您保存的凭据。然后它自动将用户名填充到最近的类似文本的输入字段中，该字段出现在DOM中密码字段的前面（只是由于观察而猜测）。由于浏览器是最后一个实例，您无法控制它

有时，即使autocomplete=off也不能阻止将凭据填写到错误的字段中，但不能阻止用户或昵称字段

---

上面的只读修复程序对我有效。

您可以尝试此变体。它对我有用。 如果只更改一次字段值，Safari将再次更改它。如果用户单击此字段，此后Safari不会自动更改该值

  $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
        if($.browser.chrome){
            $.browser.safari = false;
        }

        var isChanged=false;

        $('#Email').change(function () {
            if ($.browser.safari && !isChanged) {
                $('#Email').val('@Model.Email');
            }
        });

        $('#Email').click(function () {
            if ( $.browser.safari && !isChanged) {
                isChanged = true;
            }
        }); var isChangePassword = false;
    $('#OldPassword').change(function () {
        if ($.browser.safari && !isChangePassword) {
            $('#OldPassword').val('');
        }
    });

    $('#OldPassword').click(function () {
        if ($.browser.safari && !isChangePassword) {
            isChangePassword= true;
        }
    });

---

浏览器忽略

autocomplete=off

的原因是一些网站试图禁用密码的自动完成功能

这是错误的

2014年7月，Firefox是最后一个最终实施更改的主流浏览器，它将忽略任何试图关闭密码自动补全功能的网站

• （）
• （）
• （）
• （）

用户对我们的HTML表单自动完成功能的最大抱怨之一是“它不起作用-我看不到以前输入的任何文本”。在调试此类情况时，我们通常会发现网站使用提供的属性显式禁用了该功能，但当然，用户不知道该网站已经这么做了，只是简单地假设IE有缺陷。根据我的经验，当功能被隐藏或替换时，用户通常会责怪浏览器，而不是网站

任何网站规避浏览器偏好的任何尝试都是错误的，这就是为什么浏览器会忽略它。没有理由知道为什么网站应该尝试禁用密码保存

• Chrome忽略了它
• 萨法里对此视而不见
• 我不理它
• Firefox忽略了它

在这一点上，web开发人员通常会抗议“但我不会在任何地方都这样做——只有在有意义的地方才这样做！”即使我不会

  $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
        if($.browser.chrome){
            $.browser.safari = false;
        }

        var isChanged=false;

        $('#Email').change(function () {
            if ($.browser.safari && !isChanged) {
                $('#Email').val('@Model.Email');
            }
        });

        $('#Email').click(function () {
            if ( $.browser.safari && !isChanged) {
                isChanged = true;
            }
        }); var isChangePassword = false;
    $('#OldPassword').change(function () {
        if ($.browser.safari && !isChangePassword) {
            $('#OldPassword').val('');
        }
    });

    $('#OldPassword').click(function () {
        if ($.browser.safari && !isChangePassword) {
            isChangePassword= true;
        }
    });

<input type="text" name="user" />
<input fake_pass type="password" style="display:none"/>
<input type="password" name="pass" />

Password: &nbsp <input type="text" id="fkpass" name="bxpass" class="tinp" size="20" />

<BODY onLoad="fitform()">

<script type="text/javascript">
document.entry.fkpass.focus();
function fitform() {
document.getElementById('fkpass').autocomplete = 'off';
}
</script>

<style type="text/css">
@font-face { font-family: fdot; src: url('images/dot5.ttf'); }
@font-face { font-family: idot; src: url('images/dot5.eot'); }
@font-face { font-family: wdot; src: url('images/dot5.woff'); }
@font-face { font-family: w2dot; src: url('images/dot5.woff2'); }
.tinp { font-family: fdot, idot, wdot, w2dot; color: #000; font-size:18px; }
</style>

<label for="user_email">Email</label>
<input autocomplete="off" type="text" value="user@email.com" name="user[email]" id="user_email">
<!-- Safari looks for email inputs and overwrites the existing value with the user's personal email. This hack catches the autofill in a hidden input. -->
<label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label>
<input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">

<div style="position:absolute;height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

<input type="text" name="<?=$name?>" id="<?=$name?>" />

// Workaround for Safari autofill of the e-mail field with the username.
// Try every 50ms during 2s to reset the e-mail to its original value.
// Prevent this reset if user might have changed the e-mail himself, by
// detecting focus on the field.
if ($('#edit-mail').length) {
  var element = $('#edit-mail');
  var original = element.attr('value');
  var interval = setInterval(function() {
    if ($(document.activeElement).is(element)) {
      stop();
    } else if (element.val() != original) {
      element.val(original);
      stop();
    }
  }, 50);
  var stop = function() {
    clearTimeout(timeout);
    clearInterval(interval);
  }
  var timeout = setTimeout(function() {
    clearInterval(interval);
  }, 2000);
}

autocomplete="new-password"

<mat-form-field appearance="fill">
  <mat-label>Enter your password</mat-label>
  <input #pwd 
         matInput
         [type]="pwd.value.length === 0 ? 'text': 'password'"
         formControlName="passwordCtrl"
  required>
</mat-form-field>