Question

我们有一个配置页面，用户可以在其中配置电子邮件服务器。出于某种原因，chrome开始自动填充随机字段。我们尝试添加具有随机字符串的name属性或id属性，但google仍会自动填充这些字段。我们的字段看起来像这样

        <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>

它更改了字段，客户保存了数据却没有意识到字段已被更改。阻止这种情况的最好方法是什么。

Answer 1

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

在某些情况下，浏览器将继续建议自动补全值，即使autocomplete属性设置为off也是如此。这个对于开发人员而言，意外行为可能会令人困惑。诀窍真正强制执行非自动补全功能是将无效值分配给属性。

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

Answer 2

使用随机字段名称。

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

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

防止谷歌在Angular2中自动填充表单

2 个答案: