2022年9月

一些浏览器，如Google Chrome，甚至不关心autocomplete属性的值。停止获取建议的最佳方法是将输入的name属性更改为随时间变化的属性

截至2022年9月，浏览器将不提供一次性密码自动完成功能

所以我们可以使用otp作为域名。

<input name=“otp”>

我真不敢相信，这件事被报道了这么久，仍然是一个问题。以前的解决方案对我来说不起作用，因为Safari似乎知道元素何时不显示或不在屏幕上，但下面的解决方案确实对我起作用：

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

我已经解决了在页面加载后放置此代码的问题：

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>

对于React，您可以尝试将此代码放在表单下面或密码输入上面，或者放在电子邮件和密码输入之间

export const HackRemoveBrowsersAutofill = () => (
  <>
    <input type="email" autoComplete="new-password" style={ { display: 'none' } } />
    <input type="password" autoComplete="new-password" style={ { display: 'none' } } />
  </>
)

示例之一：

<input type="email"/>
<HackRemoveBrowsersAutofill/>
<input type="password"/>

Google Chrome忽略某些输入的autocomplete=“off”属性，包括密码输入和按名称检测的常见输入。

例如，如果您输入的是姓名地址，那么Chrome将根据其他网站上输入的地址提供自动填充建议，即使您告诉它不要这样做：

<input type="string" name="address" autocomplete="off">

如果您不希望Chrome这样做，那么可以重命名或命名表单字段的名称：

<input type="string" name="mysite_addr" autocomplete="off">

如果您不介意以前在站点上输入的自动完成值，那么可以保持启用自动完成。域名的名称间距应足以防止从其他站点记住的值出现。

<input type="string" name="mysite_addr" autocomplete="on">

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

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

在服务器上生成表单字段名称，并使用隐藏的输入字段来存储这些名称，以便在提交到服务器时，服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例，并使用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">
}