删除字段时，Chrome 自动填充会重新填充输入

Posted 2023-02-24

【中文标题】删除字段时，Chrome 自动填充会重新填充输入

【英文标题】：Chrome autofill repopulates input when field is deleted

【发布时间】：2018-05-02 07:22:59

【问题描述】：

当字段被删除时，Chrome 自动填充功能会重新填充电子邮件/密码输入，从而阻止用户使用不同的电子邮件/密码登录。尝试删除我们原来的表单实现并使用 redux-form 但仍然遇到同样的问题。有人遇到过这个问题吗？

版本 "preact": "8.2.5", “redux”：“3.7.2”， “反应”：“^15.4.2”，

Chrome 65.0.3325.181

组件：

import  Field  from 'redux-form';

import  Form  from '../form';
import  SubmitButton  from '../../buttons';
import styles from './create-account.styl';

export const CreateAccount = (props) => 
    const 
        canSubmit,
        onFormSubmit,
     = props;

    return (
        <Form
            class=styles.root
            heading="Heading"
            onSubmit=onFormSubmit
        >
            <Field
                class=styles.field
                name="email"
                component="input"
                type="email"
            />

            <Field
                class=styles.field
                name="password"
                component="input"
                type="password"
            />

            <div class=styles.actions>
                <SubmitButton
                    class=styles.submit
                    disabled=!canSubmit
                >
                    Submit
                </SubmitButton>
            </div>
        </Form>
    );
;

容器：

import  compose  from 'recompose';
import  reduxForm  from 'redux-form';
import  CreateAccount  from './create-account';

const enhance = compose(
    reduxForm(
        form: 'test',
    ),
);

export default enhance(CreateAccount);

【参考方案1】：

我之前也遇到过同样的问题。 我按照某人的建议解决了这个问题（对不起，我不记得链接了）。 请尝试在表单的开头添加以下输入字段。

<input type="email" name="email1" style=display: 'none' />
<input type="password" name="password1" style=display:'none' />

如果您还有问题，请告诉我

【讨论】：

我已经尝试过了，但仍然遇到同样的问题。现在我将 autocomplete="new-password" 添加到所有密码字段。这会禁用正上方电子邮件字段的自动填充功能。在其他领域仍然有奇怪的行为。 Chrome 正在将电子邮件和密码添加到其他字段，例如名字和搜索。我已经关注 Chromes 文档以获取正确的自动完成字段名称，但仍然遇到同样的问题。

您必须使用相同的名称。这是代码： 请把它放在 redux 表单字段之前跨度>