如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
只需将值为“off”的属性autocomplete设置为输入类型。
<input type="password" autocomplete="off" name="password" id="password" />
其他回答
Firefox 30忽略密码的autocomplete=“off”,而是选择提示用户密码是否应存储在客户端上。请注意2014年5月5日的以下评论:
密码管理器始终提示是否要保存密码。未经用户许可,密码不会保存。我们是继IE和Chrome之后第三个实现这一改变的浏览器。
根据Mozilla开发者网络文档,布尔表单元素属性autocomplete防止表单数据在旧浏览器中缓存。
<input type="text" name="foo" autocomplete="off" />
有很多答案,但大多数都是破解或某种变通方法。
这里有三个案例。
案例一:如果这是你的标准登录表单。无论如何关闭它都可能是不好的。如果你真的需要这样做,请仔细考虑。用户习惯于浏览器记住和存储密码。在大多数情况下,你不应该改变这种标准行为。
如果你仍然想这样做,请参阅案例三
案例二:如果这不是您的常规登录表单,但输入的名称或id属性不是“像”电子邮件、登录名、用户名、用户名和密码。
Use
<input type="text" name="yoda" autocomplete="off">
案例三:如果这不是您的常规登录表单,但输入的名称或id属性是“类似”电子邮件、登录名、用户名、用户名和密码。
例如:登录,abc_login,密码,some_password,password_field。
所有浏览器都带有密码管理功能,可以记住密码或建议使用更强的密码。他们就是这样做的。
然而,假设你是一个网站的管理员,可以创建用户并设置他们的密码。在这种情况下,您不希望浏览器提供这些功能。
在这种情况下,autocomplete=“off”将不起作用。使用autocomplete=“新密码”
<input type="text" name="yoda" autocomplete="new-password">
有用链接:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Chrome计划支持这一点。
目前,最好的建议是使用很少自动完成的输入类型。
Chrome讨论
<input type='search' name="whatever" />
要与Firefox兼容,请使用normalautocomplete='off'
<input type='search' name="whatever" autocomplete='off' />
我已经解决了在页面加载后放置此代码的问题:
<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
$('input[type=text]').attr('autocomplete',randomicAtomic);
</script>
如果不使用客户端和服务器端代码的组合,似乎不可能实现这一点。
为了确保用户每次都必须填写表单而不必自动完成,我使用了以下技术:
在服务器上生成表单字段名称,并使用隐藏的输入字段来存储这些名称,以便在提交到服务器时,服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例,并使用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">
}
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击