如何防止表单元素在 Chrome 中预填充

Posted

技术标签:

【中文标题】如何防止表单元素在 Chrome 中预填充【英文标题】:How to prevent form elements from pre-populating in Chrome 【发布时间】:2016-01-26 20:04:03 【问题描述】:

我正在构建一个 Bootstrap 表单,电子邮件和密码表单元素显示了来自其他站点或其他一些早期表单登录的预填充数据。 Chrome 浏览器会自动填充表单元素。

Bootstrap 中是否有 html 属性来强制这些表单元素在页面加载时为空或为空?

2015-10-29 -- 这是标记:

      <form autocomplete="off" method="post" role="form">
        <div class="form-group">
          <input name="formSubmitted" type="hidden" value="1">
        </div>
        <div class="form-group">
          <label for="username">Username</label>
          <input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input autocomplete="off" class="form-control" id="password" name="password" required type="password">
        </div>
        <button class="btn btn-default" type="submit">Login</button>
      </form>

【问题讨论】:

【参考方案1】:

使用 autocomplete="new-password"

很有魅力!

【讨论】:

这是唯一对我有用的东西,应该是公认的答案。谢谢! 同意这应该是公认的答案。【参考方案2】:

&lt;form&gt;&lt;input&gt; 上使用autocomplete="off" 属性。

来自MDN:

自动完成

该属性表示控件的值是否可以 由浏览器自动完成。

off 用户每次使用都必须在此字段中显式输入一个值,或者文档提供自己的自动完成方法; 浏览器不会自动完成输入。

on允许浏览器根据用户之前使用时输入的值自动补全值...

同样来自 MDN,参见:How to Turn Off Form Autocompletion

另见:

Chrome Browser Ignoring AutoComplete=Off "AutoComplete=Off" not working on Google Chrome Browser autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

【讨论】:

我做到了(在发布我的 OQ 之前)——但这并没有解决问题。然后我将autocomplete="off" 移动到表单标签,这也没有解决它。似乎只是谷歌浏览器中的一个错误。除非我错过了什么。 好的,一定是谷歌浏览器上的一个错误(最新/最大),我们必须忍受。 通过 Chrome 故障排除修改答案。 好的,那么这是一个 Chrome 错误。 您可以称其为 错误,但这更有可能是故意行为,因为 Google 可能会将 autocomplete="off" 视为干扰了他们首选的用户体验。他们只是选择忽略它,就像他们可能会忽略名为 ads="off"body 属性一样。

以上是关于如何防止表单元素在 Chrome 中预填充的主要内容,如果未能解决你的问题,请参考以下文章

如何使用链接从数据库中预填充表单字段?

如何避免在 Chrome 中的表单中自动填充用户名/密码?

如何防止 HTML 表单上的浏览器自动填充功能?

预填充 EntityType 类型的 Symfony 表单的字段

如何根据先前的用户选择在 Django 中预填充(多个)ChoiceField

Firefox 和 Opera/Chrome/IE 中的表单填充差异