如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
如果不使用客户端和服务器端代码的组合,似乎不可能实现这一点。
为了确保用户每次都必须填写表单而不必自动完成,我使用了以下技术:
在服务器上生成表单字段名称,并使用隐藏的输入字段来存储这些名称,以便在提交到服务器时,服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例,并使用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">
}
其他回答
三个选项:
第一:
<input type='text' autocomplete='off' />
第二:
<form action='' autocomplete='off'>
第三个(JavaScript代码):
$('input').attr('autocomplete', 'off');
没有虚假输入,没有javascript!
无法在浏览器之间一致禁用自动填充。我尝试了所有不同的建议,但没有一个在所有浏览器中都有效。唯一的方法是根本不使用密码输入。下面是我想到的:
<style type="text/css">
@font-face {
font-family: 'PasswordDots';
src: url('text-security-disc.woff') format('woff');
font-weight: normal;
font-style: normal;
}
input.password {
font-family: 'PasswordDots' !important;
font-size: 8px !important;
}
</style>
<input class="password" type="text" spellcheck="false" />
下载:text-security-disc.woff
以下是我的最终结果:
负面的副作用是,可以从输入中复制纯文本,但使用一些JS应该可以防止这种情况。
要防止浏览器自动填充用户保存的站点登录凭据,请在表单顶部放置一个文本和密码输入字段,该字段具有非空值,并设置样式“position:aabsolute;top:-999px;left:-999px”以隐藏字段。
<form>
<input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
<input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
<!-- Place the form elements below here. -->
</form>
在密码字段之前有一个文本字段很重要。否则,在某些情况下可能无法阻止自动填充。
重要的是文本和密码字段的值不能为空,以防止在某些情况下覆盖默认值。
这两个字段必须在表单中的“真实”密码类型字段之前。
对于兼容html 5.3的较新浏览器,自动完成属性值“新密码”应该有效。
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" autocomplete="new-password" />
</form>
这两种方法的组合可用于支持较旧和较新的浏览器。
<form>
<div style="display:none">
<input type="text" readonly tabindex="-1" />
<input type="password" readonly tabindex="-1" />
</div>
<!-- Place the form elements below here. -->
<input type="text" name="username" value="" />
<input type="password" name="password" value="" autocomplete="new-password" />
</form>
始终有效的解决方案
我用随机字符解决了与谷歌Chrome的无休止斗争。当您总是使用随机字符串呈现自动完成时,它将永远不会记住任何内容。
<input name="name" type="text" autocomplete="rutjfkde">
希望这对其他人有所帮助。
2022年更新:
Chrome做出了这一改进:autocomplete=“新密码”,这将解决这个问题,但我不确定,如果一段时间后Chrome再次将其更改为不同的功能。
在相关的或实际上,在完全相反的注释上-
“如果您是上述表单的用户,并希望重新启用自动完成功能,使用“记住密码”来自此bookmarklets的bookmarklet页它会删除页面上所有表单的所有autocomplete=“off”属性。保持好好战斗!"
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击