Question

在互联网上有一些关于这方面的讨论（尤其是关于堆栈溢出的问题），但其中很多都是从2015年左右开始的，所以我想知道是否有人有近期的经验。

我们使用JavaScript小部件为网络表单上的预先键入搜索功能提供支持，但此用户界面始终与Chrome自动填充功能叠加。

虽然autocomplete=“off”曾经有效，但Chrome现在似乎忽略了这个值，并且无论如何都会显示用户界面。我唯一可以在OSX上使用Chrome 66/67的功能是无效值，例如autocomplete=“blah”。这似乎太粗略了，我们之前已经对此进行了实验，在某些情况下/ Chrome版本会被忽略。

有没有人喜欢使用HTML / Javascript关闭它的可靠方法？

作为旁注 - 看起来甚至谷歌也无法在需要时将其关闭，因为他们自己的谷歌地图预先输入小部件被Chrome自动填充覆盖。这可以在大多数Shopify商店看到。

Answer 1

<强> jquery.disable-自动填充

停用Chrome的自动填充功能。当您不希望浏览器自动填充用户名/密码输入时，便于使用CRUD表单。

用法：

<form>
  <input type="input" name="username" autofill="off" autocomplete="off">
  <input type="password" name="password"  autofill="off" autocomplete="off">
</form>

<script src="jquery.disable-autofill.js"></script>
<script>
  $('input[autofill="off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

Answer 2

您可以在密码字段中输入autocomplete =“new-password”，就是这样。这应该工作得很好！

Answer 3

autocomplete="off" 不再起作用。截至 2019 ，唯一有效的方法是autocomplete="new-password"

在Chromium Project上检查此链接 https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

为用户名添加一个自动填充属性，其值为username。

如果您实施了“电子邮件优先”登录流程，该流程将   用户名和密码分为两种形式，包括一个表单域   包含用于收集密码的表单中的用户名。您   当然，可以通过CSS隐藏此字段（如果适合您   布局。

添加一个具有当前密码值的自动填充属性   登录表单上的“密码”字段。

添加自动填充   的密码字段的值为new-password的属性   注册和更改密码表格。

如果您要求用户输入   在注册或更新密码期间输入两次密码，请添加   在两个字段上都使用了新密码自动完成功能。

<form id="login" action="signup.php" method="post">
  <input type="text" autocomplete="new-password">
  <input type="password" autocomplete="new-password">
  <input type="submit" value="Sign Up">
</form>

Answer 4

为我工作

  <input [name]="nameControl" type="text" autocomplete="new-password">

在组件中：

  this.nameControl = "name" + this.getRandomInt();

  getRandomInt() {
    return Math.floor(Math.random() * Math.floor(100));
  }

Answer 5

我使用 autocomplete =“ nope”

解决了此问题

<input type="text" autocomplete="nope" />

Answer 6

如何在Chrome 86+中禁用自动填充

我尝试了几种方法，但是没有一种有效，因此我在下面提出了解决方法。如果Chrome开发团队会采用适当的自动填充禁用机制进行更新，则此答案将不相关，因此不应使用。

将.disable-autocomplete类添加到任何输入字段。

<input name="blahblah" type="text" class="disable-autocomplete">

通过提供唯一的自动填充值来关闭地址自动填充功能，并通过提供唯一的ID来关闭常规自动填充功能。

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var uniqueAutocompleteID = + new Date();
$(".disable-autocomplete").attr("autocomplete", uniqueAutocompleteID);
$(".disable-autocomplete").attr("id", uniqueAutocompleteID);
</script>

Answer 7

我可以用这个代码解决它：

<form autocomplete="off">
 <input type="text" name="text" autocomplete="off" spellcheck="off" autocorrect="off"/>
</form>

Answer 8

目前（2019年5月），只有autocomplete="new-password"运行良好。

例如，它可以使用jQuery进行编程：

$('form, input, select').attr('autocomplete', 'new-password');

Answer 9

这不是一个非常优雅的解决方案，但它可以工作。自动填充功能会在准备就绪的文档上触发。如果一秒钟禁用输入字段，它将失败，然后可以重新启用输入表单。这对于登录表单和组中的用户表单可能很有用。更好的方法是设置一些带有加载动画的叠加层，或者使用更加用户友好的方式。

jQuery示例：

  $(document).ready(function() {

    $('#[FORM_ID] input').prop('disabled',true);
   setTimeout(function(){ $('#[FORM_ID] input').prop('disabled',false); }, 1000);
});

将＃[FORM_ID]替换为您的表单ID。

Answer 10

在2019年9月使用jQuery。我在整个表单上禁用自动完成/自动填充功能所取得的唯一接近一致性的东西：

$('.disable-autofill').focus(function () {
    $(this).attr('autocomplete', 'new-password');
});
$('.disable-autofill').blur(function () {
    $(this).removeAttr('autocomplete');
});

然后将类应用于您的输入，例如：

<input name="first_name" class="disable-autofill">

您必须删除该属性，因为如果输入的autocomplete过多，则chrome开始再次忽略它：）

Answer 11

旧答案：

您可以尝试蛮力：

function annihilateChromesAutocomplete(){
    var clearAutocompleteInterval = setInterval(function(){
        var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
        for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
            peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
        }
    }, 1);
    setTimeout(function(){
        clearInterval(clearAutocompleteInterval);
    }, 2000);
}

更新：

我偶然发现了一个更简单，更清洁的解决方案。如果您将输入的默认值type设为time之类的奇怪内容，然后在页面加载时使用JavaScript动态更改type，Chrome会查找第n个time输入并最终忽略了您的输入。

window.addEventListener('load', function(){
  var inputs = document.getElementsByTagName("input");
  for(var i = 0; i < inputs.length; i++){
    if(inputs[i].type == "time"){
      inputs[i].type = "text";
    }
  }
});

<input type="time"/>
<input type="time"/>
<input type="time"/>

当然，您可以将特定的输入更改为所需的任何类型。我只是举一个例子。

Answer 12

如果不需要在浏览器中保存密码，这是仅使用CSS的解决方案。选择type =“ text”作为输入字段：

<input class="text-security-disc" type="text">

并在输入中添加样式，以隐藏文本：

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

这不适用于Mozilla Firefox，我使用了以下字体： https://github.com/noppa/text-security

Answer 13

对于React，您可以执行以下操作-

<input id={id} name={'a'+Math.random()} type="text" />

如果您需要做的就是通过id在其他地方访问输入值，例如

const value = document.getElementById(id)

（这部分是jQuery Disable Auto Fill Plugin的工作方式）。

Answer 14

试试https://github.com/terrylinooo/disableautofill.js

<script src="https://cdn.jsdelivr.net/npm/disableautofill@2.0.0/dist/disableautofill.min.js"></script>

用法：

 var daf = new disableautofill({
    'form': '#testForm',
    'fields': [
        '.test-pass',  // password
        '.test-pass2'  // confirm password
    ],
    'debug': true,
    'callback': function() {
        return checkForm(); // Form validator
    }
});

daf.init();

Answer 15

使用 autocomplete="off" 禁用 autocomplete

和 type="search" 禁用地址 autofill

Answer 16

确保您的输入元素在<form>标记内。直到那时，禁用自动填充功能对我都没有作用。

以编程方式停用Chrome自动填充功能

16 个答案: