Html 如何禁用Chrome自动填写用户名/电子邮件密码？

我知道它已经被回答了很多次了，但这是针对Chrome的旧版本

我有Chrome版本53.0.2785.143

我想禁用Chrome自动填充密码字段

我已经试过了旧答案中提到的所有方法

方法1：

尝试使用假用户名密码

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

方法2：

尝试使用

autocomplete='new-password'

和

autocomplete='false'

和

autocomplete='off'

但是这些方法都不管用。

你可以用这种方法试试

关闭自动填充功能 如果您不希望每次填写表单时都看到保存的个人信息，可以关闭“自动填写”

打开Chrome。 在右上方，单击更多，然后单击设置。

在底部，单击显示高级设置

在“密码和表单”下，“取消选中”启用自动填写，只需单击一次即可填写web表单。”

---

要重新启用自动填充，请再次选中该框。

尝试此操作

显示：无

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

它从元素中删除“name”和“id”属性，并在1ms后重新分配它们。把这个放进文件准备好

解决方案3

<input type="text" name="email">
<input type="password" name="password" autocomplete="new-password">

在Chrome 53中测试和工作

解决方案4

---

尝试

autocomplete=“false”

而不是

autocomplete=“off”

或

nofill

在管理员希望更改用户电子邮件/密码的情况下，自动填充将用户的电子邮件替换为管理员和已填充的管理员密码

对我来说，有效的方法是将字段（电子邮件、密码…）设置为禁用，并在页面加载后的第二秒使用tiemout启用它们。这样，在浏览器自动填充忽略它们之后，用户就可以使用它们了

风险在于有东西破坏了js，而js仍然不可用

如果您的服务器部件不太依赖于输入名称，我建议您将其更改为不同于登录表单中使用的名称-它们不会自动填充（除非您特别要求）。

否则，下面是示例代码：

 <input id="email" type="email" name="email" value="email@example.com" disabled>
    <input id="password" type="password" name="password" disabled>
    
    <script>
    $(document).ready(function(){
         setTimeout(
            function(){
                $('#myform input[disabled]').removeAttr('disabled');
            }, 1000);
    );
    </script>

$（文档）.ready（函数（）{
设置超时(
函数（）{
$（“#myform输入[disabled]”）。removeAttr（'disabled'）；
}, 1000);
);

Chrome只会在输入

type=“password”

时自动填充密码，否则会有以纯文本形式暴露用户密码的风险。因此，在输入字段上使用

type=“text”

，然后在用户关注输入时将type属性更改为

“password”

密码字段：

<input type="text" class="form-control" placeholder="Password"
    onfocus="this.setAttribute('type', 'password')" />

完整示例： （使用Bootstrap 3类和字体图标）

登录

为用户名添加一个值为username的autocomplete属性

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

为登录表单上的密码字段添加值为当前密码的自动完成属性

在注册和更改密码表单时，为密码字段添加值为new password的autocomplete属性

如果您要求用户在注册或密码更新期间键入密码两次，请在两个字段中添加新的密码自动完成属性

<input type="text" autocomplete="username">
<input type="password" autocomplete="current-password">

---

不幸的是，没有任何东西对我有效（win10，opera/chomium），没有“新密码”，没有其他解决方案……内联样式也有问题，当它被隐藏时，自动完成进行了

这是我的工作解决方案：我们需要两种类型=密码，首先通过外部css隐藏

<input type="password" class="vapor zero">
<input
    id="hes"
    type="password"
    placeholder="actual password"
    autocomplete="off"
    autocomplete="false"
    autocorrect="off"
    name="password2"
    value=""
    autocomplete="new-password"
    required>

jquery killer（当然）：

---

一种可能的解决方案是，首先将输入类型设置为“文本”，然后为输入添加一个事件侦听器，在编辑字段后将该类型更新为“密码”。这将允许您保留密码输入的所有功能，并有望绕过任何密码自动填充/管理器。例如：

HTML

---

我终于成功地使用了带有事件处理程序的

textarea

，该事件处理程序将键入的每个字符替换为“•”。

从2019年2月22日起，我尝试了这些方法，但没有找到有效的解决方案。 我尝试了

可见性

，

显示

，

自动完成

，但似乎不起作用。可能是我在使用材质UI时遗漏了什么

对我来说，我有两个解决办法。 这是您可以将同一属性与本机html css语法一起使用的代码

1） 具有不透明度和位置

 <input type="email" style={{opacity:"0", position:"absolute"}}/>
 <input type="password" style={{opacity:"0", position:"absolute"}}/>

<input type="email" style={{zIndex:":-100", position:"absolute"}}/>
<input type="password" style={{zIndex:"-100", position:"absolute"}}/>

2） 具有z索引和位置

 <input type="email" style={{opacity:"0", position:"absolute"}}/>
 <input type="password" style={{opacity:"0", position:"absolute"}}/>

<input type="email" style={{zIndex:":-100", position:"absolute"}}/>
<input type="password" style={{zIndex:"-100", position:"absolute"}}/>

希望这能节省一些人的时间。

根据Mozilla文档， 在大多数现代浏览器中，将autocomplete设置为“off”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在站点的登录表单中填写这些值

你必须使用

autocomplete = "new-password"

创建新帐户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是一般的“输入当前密码”可能存在的字段。浏览器可以使用此字段来避免意外填写现有密码，并在创建安全密码时提供帮助

您可以查看所有自动完成值以供参考和更好地理解。

简单替代解决方案 我也遇到了这个问题

const input = document.querySelector('.my-input');

input.addEventListener('keydown', () => {
    input.setAttribute('type', 'password');
});

 <input type="email" style={{opacity:"0", position:"absolute"}}/>
 <input type="password" style={{opacity:"0", position:"absolute"}}/>

<input type="email" style={{zIndex:":-100", position:"absolute"}}/>
<input type="password" style={{zIndex:"-100", position:"absolute"}}/>

autocomplete = "new-password"

style="text-security:disc; -webkit-text-security:disc;"

<input type="password">

<input type="text" style="text-security:disc; -webkit-text-security:disc;">

<input style="text-security:disc; -webkit-text-security:disc;">

<!DOCTYPE html>
<html>
    <head>
        <title>Font Test</title>
    </head>
    <body>
        <span>Custom font</span><input class="disk-font" type="text"/>
        <span>Normal Font</span><input type="password"/>
    </body>
    <style>
            @font-face {
                font-family: disks;
                src: url(disks.ttf);
            }
            .disk-font{
                font-family: disks;

            }
    </style>
</html>