阻止浏览器文本输入建议 2021 chrome 版本 88.0.4324.190

问题描述

如何防止来自浏览器 cookie、autocomplete="off" 和其他人的浏览器文本输入建议不起作用。Chrome 版本：2021 chrome 版本 88.0.4324.190

readonly 适用于自动填充其正常工作，但 autosuggestion 不是。

 <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;" autocomplete="off">   
<input type="password" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password">

解决方法

在 Chrome 中唯一仍然有效的是创建与字段无关的随机名称。像 autocomplete="new-password" 到密码字段名称。
似乎是错误的，但这是一种解决方法。

因此，对于名为 email 的字段，请尝试输入 autocomplete="new-email"。

即使如以下 SO 中所述，autocomplete="off" 仍然有问题：
Disabling Chrome Autofill

另请注意，由于历史原因，autocomplete="no" 似乎有效，但 autocomplete="off" 无效。 autocomplete="no" 您是在告诉浏览器该字段应该作为名为 "no" 的字段自动完成。如果您生成唯一的随机自动完成名称，则会禁用自动完成。

您需要记住，这是密码管理器的一项功能。
Mozilla 在此处正确说明了这一点：
Preventing autofilling with autocomplete="new-password"

为什么不能总是预防：
Browser compatibility

注意：在大多数现代浏览器中，将自动完成设置为“关闭”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或自动填写站点登录表单中的这些值。 See the autocomplete attribute and login fields。

解决方案 #1：

如您所见，自动建议显示 From this website。
作为解决方法，您需要将字段名从 name="email" 更改为其他名称，例如 name="user-email"。并处理服务器逻辑内部的更改。

再次在您的服务器逻辑中，每次显示页面时生成一个随机名称，例如 UUID autocomplete="c821c4f0-7be8-11eb-9439-0242ac130002"

解决方案 #2：

将输入类型 type="email" 替换为 type="text"。

html：

<input type="text" class="form-control" id="user-email" name="user-email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" />

javascript：

window.onload = function () {
    init();
}

function init() {
    let x = document.getElementById("user-email");
    if (x) x.setAttribute("type","email");
}

解决方案 #3：

在真实字段前添加隐藏字段：
HTML - Disable Password Manager

PS：不要忘记将 autocomplete="off" 放在字段所属的表单上

你想要的都在这里

将 type="password" 更改为 type="text" 并在您的输入中使用 -webkit-text-security: disc !important;

<input type="text" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password" style="-webkit-text-security: disc !important;">

autosuggest autosuggest html