我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?


当前回答

不幸的是,这些解决方案似乎都不起作用。我能够空白电子邮件(用户名)使用

                    <!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
                    <input style="display:none" type="text" name="fakeusernameremembered"/>
                    <input style="display:none" type="password" name="fakepasswordremembered"/>

技术,但密码仍然流行。

其他回答

如果显示: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>

最新的解决方案是添加autocomplete="new-password"到密码字段,以防止Chrome自动填充它。

然而,正如sibbl所指出的,这并不会阻止Chrome在表单提交完成后要求你保存密码。在Chrome 51.0.2704.106中,我发现你可以通过添加一个不可见的虚拟密码字段来实现这一点,该字段还具有属性autocomplete="new-password"。注意,“display:none”在这种情况下不起作用。在真正的密码字段之前添加如下内容:

<input type="password" autocomplete="new-password" 
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`

这只适用于当我将宽度设置为非零值时。感谢tibalt和fareed namrouti给出的原始答案。

我需要一些额外的字段才能正常工作,因为chrome实际上填充了许多字段。我还需要以一种比显示更花哨的方式隐藏字段:没有字段才能实际工作。

<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1"  type="email" name="email_autofill"/> 
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1"  type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1"   type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1"   type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish"  tabindex="-1"  type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish"  tabindex="-1"   type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish"  tabindex="-1"   type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish"  tabindex="-1"   type="password" name="passwordRepeated_autofill"/>

乔宾的回答让我吃了一惊。以下是对我有效的方法:

<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>

确保不要使用autocomplete="off",否则会破坏解决方案。

我最终通过在输入字段中放入一个不重复的变量来解决这个问题-我使用php time()像这样:

<input type="text" name="town['.time().']" >

这主要是对机器人的干扰。我在服务器端所做的就是在输入名称上做一个foreach循环-问题是如果chrome识别名称属性,它将自动填充。

其他的都对我没用。