我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
在某些情况下，即使autocomplete属性被设置为关闭，浏览器也会继续建议自动补全值。这种出乎意料的行为可能会让开发人员感到困惑。真正强制no-autocompletion的技巧是为属性分配一个随机字符串，例如:
autocomplete="nope"
其他回答
在Chromium 53.0.2785.92(64位)上，以下工作
<div style="visibility:hidden">
<input type="text" name="fake_username_remembered">
<input type="password" name="fake_password_remembered">
</div>
显示:none不工作
如果显示:none不工作，这也是可能的，它似乎是工作的(Chrome v60.0.3112.113):
.hidden-fields {
opacity: 0;
float: left;
height: 0px;
width: 0px;
}
<input type="text" name="username" class="hidden-fields">
<input type="password" name="password" class="hidden-fields">
<your actual login fields></your actual login fields>
没有一个解决方案对我有效。最后，在花了好几个小时后，我想出了这个ReactJS的解决方案。
在FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13上测试
我保持类型=“文本”，并将其更改为onChange事件上的相关类型。
例: HTML:
<输入类型=“文本”占位符=“电子邮件”/>
JS:
setAttr2: function(e){
var value = e.target.value;
if(value.length){
e.target.setAttribute('type', 'email')
} else {
e.target.setAttribute('type', 'text')
}
}
What I have done it to change the input type="text" to a multi line input ie. overflow-x:hidden; overflow-y:hidden; vertical-align:middle; resize: none; A quick explanation of the code: The overflow-x and -y hidden wil disable the scroll buttons on the right of the textarea box. The vertial algin will align the lable vertical middle with the text area and the resize: none will disable the resize grabber at the bottom right of the textarea. In essance it means that your textarea will appear like a textbox, but with chrome autofill off.
使用css text-security: disc而不使用type=password。
html
<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />
or
<form autocomplete='off'>
<input type='text' name='user' />
<input type='text' name='pass' class='secure' />
</form>
css
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
