如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
为字段使用非标准的名称和id,因此“name”不是“name_”。浏览器将不会将其视为名称字段。
最好的一点是,您可以对某些但不是所有字段执行此操作,并且它将自动完成某些但不是全部字段。
其他回答
我在一个表单上遇到了问题,其中包含用户名和电子邮件的输入字段,而电子邮件正好在用户名之后。Chrome会自动将我当前的网站用户名填入电子邮件字段,并将重点放在该字段上。这并不理想,因为它是一种向web应用程序添加新用户的表单。
看起来,如果您有两个输入,一个接一个,其中第一个输入的标签或ID中包含“用户名”或用户名,而下一个输入的商标或ID中则包含“电子邮件”一词,chrome将自动填充电子邮件字段。
对我来说,解决问题的是将输入的ID更改为不包含这些单词。我还必须设置标签的文本转换为空字符串,并使用javascript settimeout函数将标签更改回0.01秒后的状态。
setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);
如果您遇到任何其他输入字段被错误自动填充的问题,我会尝试此方法。
固定的只需在实际输入字段上方添加
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908-中等在EDGE、Chrome(最新版本63)、Firefox Quantum(57.0.4 64-бит)、Firefox(52.2.0)上测试假字段是chrome/opera自动填充错误字段的一种解决方法
const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}
<input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />
<TextField
name='userName'
autoComplete='nope'
...
/>
<TextField
name='password'
autoComplete='new-password'
...
/>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
try {
$("input[type='text']").each(
function(){
$(this).attr("autocomplete", "off");
});
}
catch (e) {
}
});
</script>
非常简单的解决方案只需更改标签名称和字段名称,而不是更通用的名称,例如:名称、联系人、电子邮件。使用“邮件收件人”而不是“电子邮件”。浏览器忽略这些字段的自动完成。
由于自动完成的行为在不同的浏览器和版本中几乎是不可预测的,所以我的方法是不同的。指定要禁用只读属性自动填充的所有输入元素,并仅在聚焦时禁用它。
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属性作为回退。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击