如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

<input autocomplete="off" aria-invalid="false" aria-haspopup="false" spellcheck="false" />

我发现它在所有浏览器上都适用。当我只使用自动完成时,它不起作用,除非我组合了您看到的所有属性。此外,我还从谷歌表单输入字段获得了解决方案

其他回答

这适用于Chrome 84.0.4147.105

1.为密码字段分配文本类型并添加类,例如“fakepasswordtype”

<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">

2.然后在第一次输入完成时,使用jQuery将类型改回密码

jQuery(document).ready(function($) {
    $('.fakepasswordtype').on('input', function(e){
        $(this).prop('type', 'password');
    });
});

这阻止了Chrome在自动填充方面的丑陋行为。

不幸的是,大多数浏览器都删除了此选项,因此无法禁用密码提示。

直到今天,我还没有找到解决这个问题的好办法。我们现在剩下的是希望有一天这种选择会回来。

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

我尝试了自动完成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上测试。

对于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"/>

要禁用表单中文本的自动完成,请使用和元素的自动完成属性。您需要该属性的“off”值。

这可以在完整表单或特定元素中完成:

将autocomplete=“off”添加到元素以禁用整个表单的自动完成。为表单的特定元素添加autocomplete=“off”。

form

<form action="#" method="GET" autocomplete="off">
</form>

输入

<input type="text" name="Name" placeholder="First Name" autocomplete="off">