防止谷歌在Angular2中自动填写表格[重复]

Posted 2023-02-22

【中文标题】防止谷歌在Angular2中自动填写表格[重复]

【英文标题】：keeping google from autofilling forms in Angular2 [duplicate]

【发布时间】：2018-12-19 18:31:05

【问题描述】：

我们有一个配置页面，用户可以在其中配置电子邮件服务器。由于某种原因，chrome 开始自动填充随机字段。我们尝试使用随机字符串添加名称属性或 id 属性，但谷歌仍会自动填充这些字段。我们的字段是这样的

        <div class="formRow row">
            <div class="col-md-2">
                <div class="formLabel" style="width:100%">"GENERAL.SMTP_SERVER" | translate</div>
            </div>
            <div class="col-md-3">
                <input  formControlName="SmtpServer" style="width:100%;" autocomplete="off">
            </div>
            <div class="formLabel col-md-1">Port</div>
            <div class="col-md-1">
                <input formControlName="SmtpServerPort">
            </div>
        </div>

它更改了字段并且客户在没有意识到字段被更改的情况下保存了数据。阻止这种情况的最佳方法是什么。

【问题讨论】：

你需要在chrome中禁用自动填充选项

你正在寻找这个autocomplete="new-password"； autocomplete="off" 用于文本预测。

这不是 Angular 问题。

【参考方案1】：

只需将autocomplete="off" 添加到您的输入中。如果这不起作用，您可以按照mdn docs 中的建议尝试使用无效值，例如autocomplete="nope"。

在某些情况下，浏览器会继续提示自动完成 即使 autocomplete 属性设置为 off。这 对于开发人员来说，意想不到的行为可能会非常令人费解。诀窍 真正强制执行非自动完成是为 属性。

您也可以尝试autocomplete="new-password"，但有时您无法说服浏览器不提供自动完成功能，尤其是登录凭据（用户名/密码）。

【讨论】：

在 Angular6 中使用 chrome 作为浏览器对我不起作用

您也可以尝试autocomplete="new-password"，但有时您无法说服浏览器不提供自动完成功能，尤其是对于登录凭据（用户名/密码）。

@KimKern 是的，我正在写另一个答案，但请随意。

autocomplete="new-password" 不是关于自动填充，而是关于值的预测。

【参考方案2】：

使用随机字段名称。

Google 可能会尝试填写 SmtpServer，但不知道如何填写“12bc234ee”。

虽然您可以要求浏览器不填写字段，但唯一可以确定的方法是创建没有数据的字段。