我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
防止用户名(或电子邮件)和密码自动完成:
<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">
防止自动完成字段(可能不起作用):
<input type="text" name="field" autocomplete="nope">
解释:
Autocomplete仍然适用于<input>,尽管有Autocomplete ="off",但你可以将off更改为随机字符串,如nope。
其他禁用字段自动补全的“解决方案”(这不是正确的方法,但它是有效的):
1.
HTML:
<input type="password" id="some_id" autocomplete="new-password">
JS (onload):
(function() {
var some_id = document.getElementById('some_id');
some_id.type = 'text';
some_id.removeAttribute('autocomplete');
})();
或者使用jQuery:
$(document).ready(function() {
var some_id = $('#some_id');
some_id.prop('type', 'text');
some_id.removeAttr('autocomplete');
});
2.
HTML:
<form id="form"></form>
JS (onload):
(function() {
var input = document.createElement('INPUT');
input.type = 'text';
document.getElementById('form').appendChild(input);
})();
或者使用jQuery:
$(document).ready(function() {
$('<input>', {
type: 'text'
}).appendTo($('#form'));
});
使用jQuery添加多个字段:
function addField(label) { var div = $('<div>'); var input = $('<input>', { type: 'text' }); if(label) { var label = $('<label>', { text: label }); label.append(input); div.append(label); } else { div.append(input); } div.appendTo($('#form')); } $(document).ready(function() { addField(); addField('Field 1: '); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"></form>
适用于:
铬:49 + Firefox: 44 +
其他回答
为了防止自动补全,只需设置一个空白作为输入值:
<input type="text" name="name" value=" ">
除了给它一个自动补全的假字段外,所有的解决方案都不起作用。我做了一个React组件来解决这个问题。
import React from 'react'
// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".
const DontBeEvil = () => (
<div style={{ display: 'none' }}>
<input type="text" name="username" />
<input type="password" name="password" />
</div>
)
export default DontBeEvil
Autocomplete ="off"通常有效,但并非总是如此。它取决于输入字段的名称。像“地址”,“电子邮件”,“姓名”这样的名称将被自动补全(浏览器认为他们帮助用户),而像“代码”,“pin”这样的字段将不会被自动补全(如果设置了autocomplete="off")
我的问题是-自动完成是混乱的谷歌地址助手
我通过重命名来修复它
从
<input type="text" name="address" autocomplete="off">
to
<input type="text" name="the_address" autocomplete="off">
铬71测试。
2021年9月回答
当我不得不处理这个问题时,唯一稳定的解决方案是在<input>元素中每次呈现网站时为名称和自动完成属性生成一个随机字符串。
下面是一个使用纯JavaScript的简单演示。
Html:
<div>
<h3>Autofill disabled with random string</h3>
<form id="disable-autofill-form">
<div>
<span>First Name</span>
<input type="text" />
</div>
<div>
<span>Last Name</span>
<input type="text" />
</div>
<div>
<span>City</span>
<input type="text" />
</div>
<div>
<span>Street</span>
<input type="text" />
</div>
<div>
<span>Postal Code</span>
<input type="text" />
</div>
</form>
</div>
JavaScript:
const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
input.setAttribute('autocomplete', randomString);
input.setAttribute('name', randomString);
});
你可以在这里找到一个Stackblitz项目。
似乎Chrome现在忽略autocomplete="off",除非它是在<form autocomplete="off">标签。