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

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

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

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

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


当前回答

为用户名字段输入值' '(空格)。

<input type = 'text' value = ' ' name = 'username' />

如果您曾经用用户输入的值填充用户名,如果没有用户输入的值,则编码输入' '。

编辑:我还不得不改变'用户名'字段有一个其他的名字,而不是'用户名',例如。“nameofuser”

其他回答

如果表单是通过javascript生成的,那么通过在输入中添加“display: none;”来隐藏它的方法对我来说就行不通了。

所以我把它们放在视线之外,让它们隐形:

<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>

而不是“这对我来说是有效的”的答案和其他看起来完全像黑客的答案……这是目前chrome(和最新的规范)将如何处理输入元素上的自动完成属性:

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en

TLDR:在您的输入上添加autocomplete='<value>',其中<value>应该是定义字段用途的任何字符串。这类似于name属性。尽可能使用上面链接上的建议值。

另外,从表单中删除autocomplete属性

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

                    <!-- 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"/>

技术,但密码仍然流行。

纯HTML解决方案:

(不需要javascript,不需要css,不需要隐藏输入)

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

注:

表单不一定是输入元素的直接父元素 Input需要一个name属性

如果你正在使用Symfony表单,autocomplete=off将不起作用,如果属性应用于树枝模板而不是使用FormBuilder。

用这个:

....
->add('field-name', TextType::class, array(
  'attr' => array(
      'autocomplete' => 'off'
  )
)
....

而不是:

....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....