如何移除Safari浏览器中输入框的邮箱/密码保存建议框？

问题描述 #

Safari浏览器中，输入框右侧出现带钥匙的提示框无法移除，相关输入框代码如下：

<div>
  <label for="email">email:</label>
  <input
    name="email"
    id="user-email"
    autofocus
    required
    type="email"
    autocomplete="new-email" />
</div>
<div>
  <label for="password">password:</label>
  <input
    name="password"
    id="user-password"
    required
    minlength="8"
    type="password"
    autocomplete="off" />
</div>

已尝试设置autocomplete="new-email"和autocomplete="off"，但未解决问题。

可行解决方案 #

针对Safari的自动填充机制，可尝试以下几种方法：

• 替换autocomplete属性值
  对于密码输入框，将autocomplete="off"改为autocomplete="new-password"，Safari对该属性的识别度更高，能有效抑制密码管理器提示。

• readonly+焦点事件绕过
  给密码输入框添加readonly属性，在用户点击输入框时移除该属性，绕过Safari的自动填充触发：
  HTML修改：

  <input
    name="password"
    id="user-password"
    required
    minlength="8"
    type="password"
    autocomplete="new-password"
    readonly
  />
  

  配套JS代码：

  const passwordInput = document.getElementById('user-password');
  passwordInput.addEventListener('focus', () => {
    passwordInput.removeAttribute('readonly');
    passwordInput.focus();
  });
  

• 增强邮箱输入框控制
  给邮箱输入框额外添加autocorrect="off"和autocapitalize="off"属性，进一步限制Safari的自动提示行为：

  <input
    name="email"
    id="user-email"
    autofocus
    required
    type="email"
    autocomplete="new-email"
    autocorrect="off"
    autocapitalize="off"
  />
  

• 隐藏假输入框分流
  在真实输入框前添加一组隐藏的假输入框，让Safari的密码管理器优先匹配假框，从而忽略真实输入框：

  <div style="display: none;">
    <input type="email" name="fake-email" autocomplete="email" />
    <input type="password" name="fake-password" autocomplete="password" />
  </div>
  

内容的提问来源于stack exchange，提问作者user20307432