我有一个简单的 html 表单，我在一个字段上使用“谷歌自动填充”，在两个字段上自动填充数据。
问题是浏览器地址自动填充与 google autofill 重叠。
如何在每个浏览器上的字段上禁用浏览器自动填充？
随意分享对此的想法。谢谢你。
这是自 2021 年 5 月起可在所有浏览器中使用的通用解决方案！
将您的输入字段名称和字段 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>City</label>为<label>C‌ity</label>. 这是一个非打印字符，因此您的用户将看到City，但浏览器将被欺骗看到C ity但无法识别该字段！
任务完成！如果一切顺利，浏览器不应再在这些字段上显示内置地址自动完成小部件！
希望这对您的努力有所帮助！
小智 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'); 就足够了，但是浏览器兼容性正在发生变化，最终一切都会正常工作，所以最好将它放在那里。
如果这有效（或无效），请发表评论！谢谢