如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
没有虚假输入,没有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应该可以防止这种情况。
其他回答
我遇到了同样的问题,今天2019年10月9日,我找到的唯一解决方案是
将autocomplete=“off”添加到表单标记中。
打开表单标签后输入1个错误。
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
但它在密码类型字段上不起作用,请尝试
<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>
在脚本上
function turnOnPasswordStyle() {
$('#password').attr('type', "password");
}
这在Chrome-78、IE-44、Firefox-69上进行了测试
目前我找到的解决方案都没有带来真正有效的回应。
具有自动完成属性的解决方案不起作用。
所以,这是我为自己写的:
<input type="text" name="UserName" onkeyup="if (this.value.length > 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');" >
您应该对页面上希望作为密码类型的每个输入字段执行此操作。
这是有效的。
干杯
在尝试了所有解决方案之后(有些解决方案部分奏效,禁用自动填充但不自动完成,有些根本不奏效),我找到了截至2020年的最佳解决方案,将type=“search”和autocomplete=“off”添加到输入元素中。这样地:
<input type="search" /> or <input type="search" autocomplete="off" />
还要确保表单元素具有autocomplete=“off”。这非常有效,并禁用自动完成和自动填充。
此外,如果您使用type=“email”或任何其他文本类型,则需要添加autocomplete=“new email”,这将完全禁用两者。type=“password”也是如此。只需将“new-”前缀与类型一起添加到自动完成中即可。这样地:
<input type="email" autocomplete="new-email" />
<input type="password" autocomplete="new-password" />
这适用于Chrome 84.0.4147.105
1.为密码字段分配文本类型并添加类,例如“fakepasswordtype”
<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">
2.然后在第一次输入完成时,使用jQuery将类型改回密码
jQuery(document).ready(function($) {
$('.fakepasswordtype').on('input', function(e){
$(this).prop('type', 'password');
});
});
这阻止了Chrome在自动填充方面的丑陋行为。
由于自动完成的行为在不同的浏览器和版本中几乎是不可预测的,所以我的方法是不同的。指定要禁用只读属性自动填充的所有输入元素,并仅在聚焦时禁用它。
document.addEventListener('click', (e) => {
readOnlys.forEach(readOnly => {
if (e.target == readOnly) {
readOnly.removeAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'none');
} else {
readOnly.setAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'auto');
}
});
});
document.addEventListener('keyup', (e) => {
if (e.key == 'Tab') {
readOnlys.forEach(readOnly => {
if (e.target == readOnly) {
readOnly.removeAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'none');
} else {
readOnly.setAttribute('readonly', '');
readOnly.style.setProperty('pointer-events', 'auto');
}
});
}
});
如果您想确保用户在禁用JS的情况下仍然可以访问字段,那么可以在页面加载时通过JS设置所有只读。您仍然可以使用autocomplete属性作为回退。
推荐文章
- 如何修复favicon.ico错误:“Failed to load resource: net::ERR_EMPTY_RESPONSE”
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- 将Dropzone.js与其他字段集成到现有的HTML表单中