html - 谷歌表单自动完成奇怪的行为
问题描述
我希望这个问题是有道理的。我正在开发一个使用 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;
}
解决方案
正如您刚刚提到的 Chrome,解决方案将添加带有值的自动完成属性。
autocomplete="chrome-off"
每个浏览器的行为都非常不同,因此如果您想要完全兼容,您可能必须添加一些条件。
autocomplete="off"
改为使用 Firefox你如何禁用浏览器在网络表单字段/输入标签上的自动完成功能?
推荐阅读
- c# - 通过请求传入模型但发布表单数据,而不是模型
- sql - LARAVEL:返回所有帖子的最后评论基于当前登录用户
- php - 我如何制作一个只有某些用户也可以发布但所有用户都可以看到的类似博客的页面?
- python - 使用 scipy.optimize.curve_fit 的指数拟合没有很好的猜测
- java - 等同于 JDK,但仍然“已由 Java 运行时的更新版本编译”
- javascript - 如何将递归应用于两层深的链表?
- python - 需要能够子类化一个模拟补丁的python类
- c++ - 通过作为类的公共成员的两个函数将函数作为参数传递
- ruby-on-rails - 为什么 Rspec No route 与 Rails 匹配错误?
- reactjs - “无法读取未定义的属性‘节点’” - Gatsby/GraphQL/Prismic