如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
只需将值为“off”的属性autocomplete设置为输入类型。
<input type="password" autocomplete="off" name="password" id="password" />
其他回答
没有虚假输入,没有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应该可以防止这种情况。
我认为HTML5支持autocomplete=off。
问问自己为什么要这样做——在某些情况下这可能是有意义的,但不要只是为了这样做而这样做。
这对用户来说不太方便,甚至在OS X中也没有安全问题(Soren在下面提到)。如果你担心人们的密码被远程窃取,即使你的应用程序使用autcomplete=off,击键记录器仍然可以做到这一点。
作为一个选择让浏览器记住(大部分)我的信息的用户,如果你的网站不记得我的信息,我会觉得很烦人。
您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:
<form id="something-form">
<input style="display: none" name="email" value="randomgeneratevalue"></input>
<input type="password">
</form>
如果使用此方法,Google Chrome将无法插入自动填充密码。
有时,即使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中的密码字段之前。因为浏览器是最后一个实例,您无法控制它。
上面的这个只读修复对我有用。
可以说,我想要一种可以将现场管理完全从浏览器手中拿走的东西。在本例中,有一个标准的文本输入字段来捕获密码-没有电子邮件、用户名等。。。
<input id='input_password' type='text' autocomplete='off' autofocus>
有一个名为“input”的变量,设置为空字符串。。。
var input = "";
jQuery监视字段事件。。。
聚焦时,始终清除字段内容和关联的“输入”变量。在按键时,任何字母数字字符以及一些定义的符号都会附加到“input”变量,并且字段输入会替换为项目符号。此外,当按下Enter键时,键入的字符(存储在“input”变量中)将通过Ajax发送到服务器。(请参阅下面的“服务器详细信息”。)在设置键时,Home、End和Arrow键会刷新“input”变量和字段值。(我可能会对箭头导航和焦点事件产生兴趣,并使用.selectionStart来确定用户单击或正在导航的位置,但不值得为密码字段付出努力。)此外,按下Backspace键会相应地截断变量和字段内容。
$("#input_password").off().on("focus", function(event) {
$(this).val("");
input = "";
}).on("keypress", function(event) {
event.preventDefault();
if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
$(this).val( $(this).val() + "•" );
input += event.key;
}
else if (event.key == "Enter") {
var params = {};
params.password = input;
$.post(SERVER_URL, params, function(data, status, ajax) {
location.reload();
});
}
}).on("keyup", function(event) {
var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
if ($.inArray(event.key, navigationKeys) > -1) {
event.preventDefault();
$(this).val("");
input = "";
}
else if (event.key == "Backspace") {
var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
input = input.substring(0, length);
}
});
前端摘要
本质上,这使浏览器无法捕获任何有用的内容。即使它覆盖了自动完成设置,和/或显示了一个包含先前输入值的下拉列表,它也只存储字段值的项目符号。
服务器详细信息(可选阅读)
如上所示,一旦服务器返回JSON响应,JavaScript就会执行location.reload()。(此登录技术用于访问受限制的管理工具。与cookie内容相关的一些过度使用可以被跳过,以实现更广泛的实现。)以下是详细信息:
当用户导航到站点时,服务器会查找合法的cookie。如果没有任何cookie,将显示登录页面。当用户输入密码并通过Ajax发送,服务器确认密码并检查以查看用户的IP地址是否在授权IP地址列表中。如果无法识别密码或IP地址,则服务器不会生成cookie,因此当页面重新加载时,用户会看到相同的登录页面。如果密码和IP地址都被识别,服务器将生成cookie具有十分钟的使用寿命,它还存储与时间帧和IP地址相对应的两个加扰值。当页面重新加载时,服务器会找到cookie并验证加扰值是正确的(即时间帧与cookie的日期相对应并且IP地址相同)。每当用户与服务器交互时,无论他们是登录、显示数据还是更新记录,都会重复验证和更新cookie的过程。如果cookie的值始终正确,服务器将显示完整的网站(如果用户正在登录)或满足提交的任何显示或更新请求。如果在任何时候cookie的值不正确,服务器会删除当前cookie,然后在重新加载时,会导致登录页面重新显示。
推荐文章
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?