在输入字段上禁用浏览器自动填充（所有浏览器）

Question

我有一个简单的 html 表单，我在一个字段上使用“谷歌自动填充”来自动填充两个字段的数据。

问题在于浏览器地址自动填充与谷歌自动填充重叠。

如何在每个浏览器上禁用浏览器自动填充字段？

请随时分享对此的想法。 谢谢。

Answer 1

这是自 2021 年 5 月起适用于所有浏览器的通用解决方案！

TL;DR

将您的输入字段名称和字段 ID 重命名为不相关的名称，例如 'data_input_field_1'。然后将‌ 字符添加到标签中间。这是一个非打印字符，因此您不会看到它，但它会诱使浏览器不将该字段识别为需要自动完成的字段，因此不会显示内置的自动完成小部件！

细节

几乎所有浏览器都使用字段名称、ID、占位符和标签的组合来确定该字段是否属于可以从自动完成中受益的一组地址字段。因此，如果您有一个像<input type="text" id="address" name="street_address"> 这样的字段，几乎所有浏览器都会将该字段解释为地址字段。因此，浏览器将显示其内置的自动完成小部件。梦想是使用属性autocomplete="off" 会起作用，不幸的是，现在大多数浏览器都不服从这个请求。

所以我们需要使用一些技巧来让浏览器不显示内置的自动完成小部件。我们将这样做的方法是欺骗浏览器，使其相信该字段根本不是地址字段。

首先将 id 和 name 属性重命名为不会泄露您正在处理与地址相关的数据的内容。所以不要使用<input type="text" id="city-input" name="city">，而是使用类似的东西<input type="text" id="input-field-3" name="data_input_field_3">。浏览器不知道 data_input_field_3 代表什么。但你知道。

如果可能，不要使用占位符文本，因为大多数浏览器也会考虑到这一点。如果您必须使用占位符文本，那么您必须发挥创意并确保您没有使用任何与地址参数本身相关的词语（例如City）。使用Enter location 之类的东西可以解决问题。

最后一个参数是附加到字段的标签。但是，如果您像我一样，您可能希望保持标签完整，并向您的用户显示可识别的字段，例如“地址”、“城市”、“州”、“国家”。好吧，好消息：你可以！实现这一点的最佳方法是插入一个零宽度非连接字符‌ 作为标签中的第二个字符。所以用<label>C‌ity</label>替换<label>City</label>。这是一个非打印字符，因此您的用户会看到 City，但浏览器会被欺骗看到 C ity 而无法识别该字段！

任务完成！如果一切顺利，浏览器不应再在这些字段上显示内置地址自动完成小部件！

希望这对您的努力有所帮助！

Answer 2

这不是那么容易实现跨浏览器。

许多浏览器，尤其是谷歌浏览器，都在努力开发一种工具来帮助用户自动填写表单，但对于开发人员来说，这简直是痛苦的。

我可以列出大量不同的方法，这些方法可以根据不同的因素起作用，也可以不起作用，但我将发布这个最终解决问题的解决方案。因此，如果您一直在互联网上寻找这个答案，请在下面给我留言，告诉我它是否有效。

首先，由于浏览器的兼容性，我们需要添加这些属性，因为最终一切都会正常工作：

autocorrect="off" spellcheck="false" autocomplete="off"

这应该足够了，但事实并非如此！我们都知道。所以接下来要做的是添加一点 JS，以防浏览器设法忽略这些属性。对于这个例子，我将只使用 jQuery 并假设我们在这里处理输入，但你可以选择任何你想要的选择器。

$('form').attr('autocomplete', 'off');
$('input').attr('autocomplete', 'off');

最后，这将在 50% 的情况下有效，但如果浏览器之前检测到此表单过去已填写，它可能会忽略它，所以让我们添加最后一步。

还有另一个流行的技巧是添加一个虚拟密码字段，但我不喜欢添加虚拟内容，而且我不觉得这个解决方案很优雅，所以我会跳过它，除了它不起作用。

说实话，这最后一步是让一切正常工作的一步，但正如我所说，如果我们的属性为未来的兼容性做好准备会更好。请记住，浏览器永远不会尝试自动完成只读输入，因此对于这最后一步，我们需要将其设为只读并在焦点上使其恢复正常，因此在 onfocus 属性中添加以下 JS：

readonly onfocus="this.removeAttribute('readonly');"

宾果游戏！它现在应该可以工作了。

所以最终的输入看起来像这样：

<input type="text" name="email" required autocorrect="off" spellcheck="false" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
<script>
$('input').attr('autocomplete', 'off');
</script>

看起来很多，但这在 100% 的情况下都有效。正如我所说的 readonly onfocus="this.removeAttribute('readonly'); 就足够了，但是浏览器兼容性正在发生变化，最终一切都会正常工作，所以最好有它。

如果这有效（或无效）发表评论！ 谢谢