其想法是创建一个与原始字段同名的不可见字段。这将使浏览器自动填充隐藏字段。

我使用以下jQuery片段：

// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
    this.each(function () {
        var $el = $(this);
        $el
            .clone(false, false) // Make a copy (except events)
            .insertBefore($el)   // Place it before original field
            .prop('id', '')      // Prevent ID duplicates
            .hide()              // Make it invisible for user
        ;
    });
};

然后只需$（“#登录表单输入”）.prpreventAutocomplete（）；

我尝试了几乎所有的答案，但新版本的Chrome很聪明；如果你写

autocomplete="randomstring" or autocomplete="rutjfkde"

它会自动将其转换为

autocomplete="off"

当输入控件接收到焦点时。

所以，我使用jQuery完成了这项工作，我的解决方案如下。

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

这是最简单的，对于表单上的任何数量的控件都可以做到。

我正在四处寻找解决方案，但没有一个在所有浏览器上都能正常工作。

我尝试了自动完成off、none、nope、new_input_64（甚至是一些有趣的文本），因为autocomplete属性希望传递字符串，无论是什么。

经过多次搜索和尝试，我找到了这个解决方案。

我将所有输入类型都改为文本，并添加了一些简单的CSS代码。

以下是表格：

<form class="row gy-3">
  <div class="col-md-12">
    <label for="fullname" class="form-label">Full Name</label>
    <input type="text" class="form-control" id="fullname" name="fullname" value="">
  </div>
  <div class="col-md-6">
    <label for="username" class="form-label">User Name</label>
    <input type="text" class="form-control" id="username" name="username" value="">
  </div>
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="text" class="form-control" id="email" name="email" value="">
  </div>
  <div class="col-md-6">
    <label for="password" class="form-label">Password</label>
    <input type="text" class="form-control pswd" id="password" name="password" value="">
  </div>
  <div class="col-md-6">
    <label for="password" class="form-label">Confirm Password</label>
    <input type="text" class="form-control pswd" id="password" name="password" value="">
  </div>
  <div class="col-md-12">
    <label for="recaptcha" class="form-label">ReCaptcha</label>
    <input type="text" class="form-control" id="recaptcha" name="recaptcha" value="">
  </div>
</form>

隐藏密码的CSS代码：

.pswd {
    -webkit-text-security: disc;
}

在Chrome、Opera和Edge上测试。

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

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

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

为了避免无效的XHTML，可以使用JavaScript设置此属性。使用jQuery的示例：

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

问题是没有JavaScript的用户将获得自动完成功能。

您可以在属性name how电子邮件地址中向表单添加名称，并生成电子邮件值。例如：

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

如果使用此方法，Google Chrome将无法插入自动填充密码。