谷歌表单自动完成奇怪的行为

Question

我希望这个问题有意义。我正在开发一个使用 Identity Server 4 进行身份验证的网站（可能不相关，但不会受到伤害）。我在登录页面上做了很多测试，自然而然地谷歌（特别是 Chrome，我假设）为以前的条目提供建议。我对前端设计不是很熟悉，也不知道从哪里开始解决这个问题。我不介意有自动完成功能，但正如您在附图中看到的那样，它与 UI 的交互非常奇怪。

我正在使用 Bootstrap 4 顺便说一句。这是图中卡片的cshtml：

<div class="card-body">
    <form class="rounded-lg" asp-route="Login">
        <input type="hidden" asp-for="ReturnUrl" />
        <div class="form-group">
            <input class="form-control custom-input rounded-lg" placeholder="Email or Username" asp-for="Username" required>
        </div>
        <div class="form-group password">
            <input id="password-field" type="password" class="form-control rounded-lg" placeholder="Password" asp-for="Password" required autocomplete="off">
            <span id="pass-status" class="fa fa-eye" aria-hidden="true"></span>
        </div>
        @if (Model.AllowRememberLogin)
        {
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input rounded-sm" asp-for="RememberLogin">
                    <label class="form-check-label" asp-for="RememberLogin">Remember Me</label>
                </div>
            </div>
        }
        <p>Default Username: Admin Password: P@ssword1</p>
        <button class="btn btn-lg btn-primary btn-block text-uppercase rounded-pill" name="button" value="login">Sign In</button>
        <div class="custom-link">
            <a href="@Url.Action("Register", "Account", new { returnUrl = Model.ReturnUrl })" class="card-link">Or Register a New Account</a>
        </div>
    </form>
</div>     

这里是css：

@import '../lib/bootstrap/dist/css/bootstrap.min.css';

.custom-input {
    height: auto;
}

.custom-link {
    padding-top: 15px;
}

.custom-body-container {
    margin-top: 10%;
}

.password {
    position: relative;
    margin-bottom: 10px;
}

.password .fa-eye {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 15px;
}

.password .fa-eye-slash {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 15px;
}            

Answer 1

正如您刚才提到的 Chrome，解决方案是添加带有值的自动完成属性。

autocomplete="chrome-off"

Disabling Chrome Autofill

每个浏览器的行为都非常不同，因此如果您想要完全兼容，可能需要添加一些条件。

Firefox 使用 autocomplete="off" 而不是 How do you disable browser Autocomplete on web form field / input tag?