我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。

尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。


当前回答

2021答: 可悲的是,唯一有效的东西都是令人作呕的俗气。我的解决方案是在生成前端标记时,在name属性的末尾添加一个动态生成的随机数(例如<input name="postcode-22643"…)这对浏览器来说是一种欺骗。

然后需要在服务器端添加一些东西来清理传入的post请求。例如,在NodeJS / Express中,我放入了一个中间件,并使用了一些正则表达式来从收到的post请求中删除数字段。我的是这样的,但我想在其他语言中也会有类似的东西:

const cleanseAutosuggest = function (req, res, next) {
   for (const key in req.body) {
      if (key.match(/-\d+/)) {
         req.body[key.replace(/-\d+/, "")] = req.body[key];
         delete req.body[key];
      }
   }
   next();
};

app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})

其他回答

2021年9月回答

当我不得不处理这个问题时,唯一稳定的解决方案是在<input>元素中每次呈现网站时为名称和自动完成属性生成一个随机字符串。

下面是一个使用纯JavaScript的简单演示。

Html:

<div>
     <h3>Autofill disabled with random string</h3>
     <form id="disable-autofill-form">
       <div>
         <span>First Name</span>
         <input type="text" />
       </div>
       <div>
         <span>Last Name</span>
         <input type="text" />
       </div>
       <div>
         <span>City</span>
         <input type="text" />
       </div>
       <div>
         <span>Street</span>
         <input type="text" />
       </div>
       <div>
         <span>Postal Code</span>
         <input type="text" />
       </div>
     </form>
</div>

JavaScript:

const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
  ...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
  input.setAttribute('autocomplete', randomString);
  input.setAttribute('name', randomString);
});

你可以在这里找到一个Stackblitz项目。

现代的方法

简单地使你的输入为只读,然后聚焦,删除它。这是一种非常简单的方法,浏览器不会填充只读输入。因此,此方法被接受,并且永远不会被将来的浏览器更新覆盖。

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

下一部分是可选的。相应地设置输入样式,使其看起来不像只读输入。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

工作示例

以下是我在Chrome版本51.0.2704.106上的工作方式。<input id="user_name" type="text" name="user_name" autocomplete="off" required /> And in combination with <input id="user_password" type="password" name="user_password" autocomplete="new-password" required />。我的问题是,在实现new-password之后,它仍然会在user_name字段上显示用户名的下拉列表。

为了防止自动补全,只需设置一个空白作为输入值:

<input type="text" name="name" value="  ">

用autocomplete="false"代替autocomplete="off";)

来自:https://stackoverflow.com/a/29582380/75799