我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
2021答: 可悲的是,唯一有效的东西都是令人作呕的俗气。我的解决方案是在生成前端标记时,在name属性的末尾添加一个动态生成的随机数(例如<input name="postcode-22643"…)这对浏览器来说是一种欺骗。
然后需要在服务器端添加一些东西来清理传入的post请求。例如,在NodeJS / Express中,我放入了一个中间件,并使用了一些正则表达式来从收到的post请求中删除数字段。我的是这样的,但我想在其他语言中也会有类似的东西:
const cleanseAutosuggest = function (req, res, next) {
for (const key in req.body) {
if (key.match(/-\d+/)) {
req.body[key.replace(/-\d+/, "")] = req.body[key];
delete req.body[key];
}
}
next();
};
app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})
其他回答
你可以使用下面的概念来实现AutoComplete='false' chrome以及其他浏览器。取一个虚拟输入类型,它的不透明度为0。默认chrome浏览器已经触发第一个已经隐藏。
<input style="opacity: 0; position: absolute; z-index: -1;" name="email">
<input type="search" name="email" class="form-control" autocomplete="new-email" id="email">
对任何想要解决这个问题的人来说,我终于明白了。
Chrome只服从的自动完成="off"如果页面是HTML5页面(我使用XHTML)。
我把我的页面转换成HTML5,问题就消失了(捂脸)。
浏览器不关心自动完成=关闭自动,甚至填充凭据到错误的文本字段?
我通过将密码字段设置为只读并激活它来修复它,当用户单击进入它或使用tab键到该字段时。
修复浏览器自动填充:只读和设置可写的焦点(在鼠标点击和标签通过字段)
<input type="password" readonly
onfocus="$(this).removeAttr('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/
/ / UpdateEnd
顺便说一下,更多关于我观察到的信息:
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.
对我来说,在表单和输入中设置autocomplete=“off”是有效的。但可以是片状的。有时它会建议密码或一些保存的登录名+密码选项。但不要提前预约。
Chrome版本:81.0.4044.138
CodePen
<表单角色=“表单” 方法=“发布” 操作=“#” 自动完成=“关闭”> <标签=“登录”>登录</label><br/> <输入类型=“文本” 名称=“登录” id=“登录” 自动完成=“关闭” /> <br/><br/> <标签=“密码”>密码</label><br/> <输入类型=“密码” 名称=“密码” 自动完成=“关闭” /> <br/><br/> <输入类型=“提交” 名称=“提交” 值=“提交” /> </form>
其他选项:
删除'form'标签…或者在提交之前将其从'div'更改为'form'。 用javascript和一些contentteditable ="true"字段可以让你的方式…
通常每隔几个月我就得另找工作。
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项目。