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

TL；博士

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

详细信息

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

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

首先，将id和name属性重命名为不会泄露您正在处理的地址相关数据的属性。因此，与其使用＜input type=“text”id=“city input”name=“city”＞，不如使用类似的方式。浏览器不知道data_input_field_3代表什么。但你知道。

如果可能，不要使用占位符文本，因为大多数浏览器也会考虑到这一点。如果你必须使用占位符文本，那么你就必须发挥创意，确保你没有使用任何与地址参数本身相关的单词（如City）。使用类似“输入位置”的方法可以实现此目的。

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

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

添加

autocomplete=“关闭”

表单标记将禁用浏览器对该特定表单中所有输入字段的自动完成（之前在该字段中键入的内容）。

测试日期：

Firefox 3.5，4测试版Internet Explorer 8铬

除了设置autocomplete=off之外，您还可以通过生成页面的代码随机化表单字段名称，或者在名称末尾添加一些特定于会话的字符串。

提交表单后，您可以在服务器端处理表单之前剥离该部分。这将阻止web浏览器查找字段的上下文，也可能有助于防止XSRF攻击，因为攻击者无法猜测表单提交的字段名称。

<form name="form1" id="form1" method="post"
      autocomplete="off" action="http://www.example.com/form.cgi">

这将在Internet Explorer和Mozilla Firefox中运行。缺点是它不是XHTML标准。

我的问题主要是Chrome自动填充，但我认为这可能比自动完成问题更大。

技巧：使用计时器重置表单并将密码字段设置为空白。100毫秒的持续时间似乎是它工作的最短时间。

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});

如果不使用客户端和服务器端代码的组合，似乎不可能实现这一点。

为了确保用户每次都必须填写表单而不必自动完成，我使用了以下技术：

在服务器上生成表单字段名称，并使用隐藏的输入字段来存储这些名称，以便在提交到服务器时，服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例，并使用css隐藏每个集合的第一个和最后一个字段，然后在使用javascript加载页面后禁用它们。这是为了防止浏览器自动填写字段。

这里有一个fiddle演示了javascript、css和html，如#2所述https://jsfiddle.net/xnbxbpv4/

javascript代码：

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

css：

.disable-input {
  display: none;
}

html格式：

<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>

下面是一个使用asp.net和razor的服务器代码的粗略示例

型号：

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

控制器：

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

视图：

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}