如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
如果不使用客户端和服务器端代码的组合,似乎不可能实现这一点。
为了确保用户每次都必须填写表单而不必自动完成,我使用了以下技术:
在服务器上生成表单字段名称,并使用隐藏的输入字段来存储这些名称,以便在提交到服务器时,服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例,并使用css隐藏每个集合的第一个和最后一个字段,然后在使用javascript加载页面后禁用它们。这是为了防止浏览器自动填写字段。
这里有一个fiddle演示了javascript、css和html,如#2所述https://jsfiddle.net/xnbxbpv4/
javascript代码:
$(document).ready(function() {
$(".disable-input").attr("disabled", "disabled");
});
css:
.disable-input {
display: none;
}
html格式:
<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>
下面是一个使用asp.net和razor的服务器代码的粗略示例
型号:
public class FormModel
{
public string Username { get; set; }
public string Password { get; set; }
}
控制器:
public class FormController : Controller
{
public ActionResult Form()
{
var m = new FormModel();
m.Username = "F" + Guid.NewGuid().ToString();
m.Password = "F" + Guid.NewGuid().ToString();
return View(m);
}
public ActionResult Form(FormModel m)
{
var u = Request.Form[m.Username];
var p = Request.Form[m.Password];
// todo: do something with the form values
...
return View(m);
}
}
视图:
@model FormModel
@using (Html.BeginForm("Form", "Form"))
{
@Html.HiddenFor(m => m.UserName)
@Html.HiddenFor(m => m.Password)
<input type="email" name="@Model.Username" placeholder="username" class="disable-input">
<input type="email" name="@Model.Username" placeholder="username">
<input type="email" name="@Model.Username" placeholder="username" class="disable-input">
<br>
<input type="password" name="@Model.Password" placeholder="password" class="disable-input">
<input type="password" name="@Model.Password" placeholder="password">
<input type="password" name="@Model.Password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
}
其他回答
不幸的是,大多数浏览器都删除了此选项,因此无法禁用密码提示。
直到今天,我还没有找到解决这个问题的好办法。我们现在剩下的是希望有一天这种选择会回来。
我通过添加两个假输入并赋予它们绝对位置来阻止Chrome 66自动填充:
<form style="position: relative">
<div style="position: absolute; top: -999px; left: -999px;">
<input name="username" type="text" />
<input name="password" type="password" />
</div>
<input name="username" type="text" />
<input name="password" type="password" />
起初,我尝试添加display:none;但Chrome忽略了这些输入,并自动填充可见的输入。
在这次谈话中,没有一个解决方案对我有效。
我终于找到了一个纯HTML解决方案,它不需要任何JavaScript,可以在现代浏览器中工作(除了Internet Explorer;至少要有一个捕获,对吗?),并且不需要对整个表单禁用自动完成。
只需关闭表单上的自动完成功能,然后为您希望在表单中工作的任何输入打开它。例如:
<form autocomplete="off">
<!-- These inputs will not allow autocomplete and Chrome
won't highlight them yellow! -->
<input name="username" />
<input name="password" type="password" />
<!-- This field will allow autocomplete to work even
though we've disabled it on the form -->
<input name="another_field" autocomplete="on" />
</form>
除了设置autocomplete=off之外,您还可以通过生成页面的代码随机化表单字段名称,或者在名称末尾添加一些特定于会话的字符串。
提交表单后,您可以在服务器端处理表单之前剥离该部分。这将阻止web浏览器查找字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名称。
有时,即使autocomplete=off也无法阻止将凭据填写到错误的字段中,而不是用户或昵称字段。
除了apinstein关于浏览器行为的帖子之外,还有一个变通方法。
修复浏览器自动填充为只读,并在焦点上设置为可写(单击并选项卡)
<input type="password" readonly
onfocus="this.removeAttribute('readonly');"/>
更新:
Mobile Safari在字段中设置光标,但不显示虚拟键盘。新的修复程序与以前一样,但它处理虚拟键盘:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
现场演示https://jsfiddle.net/danielsuess/n0scguv6/
//更新结束
因为浏览器自动将凭据填充到错误的文本字段!?
我注意到在Chrome和Safari上,当相同的表单中有密码字段时,会出现这种奇怪的行为。我猜浏览器会寻找一个密码字段来插入您保存的凭据。然后它会自动填充(只是由于观察而猜测)最近的类似文本的输入字段,该字段出现在DOM中的密码字段之前。因为浏览器是最后一个实例,您无法控制它。
上面的这个只读修复对我有用。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击