Chrome自动填充删除字段后重填账号密码导致无法换号登录求助

我之前也碰到过Chrome这个烦人的自动回填问题，尤其是换用redux-form之后依然存在，简直头大！结合你用的技术栈（preact 8.2.5、redux 3.7.2、react 15.4.2、Chrome 65.0.3325.181），给你几个亲测有效的解决方案：

1. 针对性设置autoComplete属性 #

Chrome对autoComplete的处理有时候比较“固执”，普通的off可能没用，试试给字段设置更具体的属性值：

• 邮箱字段：设置autoComplete="username"（Chrome会把它识别为非自动填充的用户名类型）
• 密码字段：设置autoComplete="new-password"（这个值是Chrome专门用来禁用密码自动填充的）

结合redux-form的Field组件，代码可以这么写：

<Field 
  name="email" 
  component="input" 
  type="email" 
  autoComplete="username" 
/>
<Field 
  name="password" 
  component="input" 
  type="password" 
  autoComplete="new-password" 
/>

同时别忘了给外层的Form也加上autocomplete="off"属性：

<Form onSubmit={handleSubmit} autocomplete="off">
  {/* 字段内容 */}
</Form>

2. 手动清空字段值（利用redux-form的API） #

Chrome的自动回填往往发生在组件渲染完成之后，所以我们可以在组件挂载后手动清空表单字段，抢占Chrome的“先机”。

在你的表单组件里，利用preact的componentDidMount生命周期，结合redux-form的change action来清空字段：

import { connect } from 'react-redux';
import { change } from 'redux-form';

class LoginForm extends Component {
  componentDidMount() {
    // 手动清空邮箱和密码字段
    this.props.change('yourFormName', 'email', '');
    this.props.change('yourFormName', 'password', '');
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <Form onSubmit={handleSubmit} autocomplete="off">
        <Field name="email" component="input" type="email" autoComplete="username" />
        <Field name="password" component="input" type="password" autoComplete="new-password" />
        <SubmitButton>登录</SubmitButton>
      </Form>
    );
  }
}

export default connect(null, { change })(LoginForm);

注意把yourFormName替换成你redux-form中定义的表单名称。

3. 用“假输入框”欺骗Chrome自动填充 #

这个方法有点讨巧，但对于顽固的Chrome自动填充特别有效：在真实的输入框前面添加两个隐藏的假输入框，让Chrome把自动填充的内容放到假框里，真实框就不会被干扰了。

代码示例：

<Form onSubmit={handleSubmit} autocomplete="off">
  {/* 隐藏的假输入框，用来接收Chrome的自动填充 */}
  <input 
    type="email" 
    style={{ position: 'absolute', left: '-9999px', top: '-9999px' }} 
    autoComplete="email" 
  />
  <input 
    type="password" 
    style={{ position: 'absolute', left: '-9999px', top: '-9999px' }} 
    autoComplete="password" 
  />
  {/* 真实的输入框 */}
  <Field name="email" component="input" type="email" autoComplete="off" />
  <Field name="password" component="input" type="password" autoComplete="off" />
  <SubmitButton>登录</SubmitButton>
</Form>

这里的关键是假框的type和autoComplete要和真实字段匹配，并且用绝对定位把它们移出可视区域（别用display: none，Chrome可能会忽略隐藏的元素）。

4. 禁用Chrome的自动填充设置（临时方案） #

如果上面的方法都不行，可以让用户临时关闭Chrome的自动填充功能：

• 打开Chrome设置 → 密码和表单 → 关闭“自动填充密码”和“自动填充地址和更多信息”

不过这个是用户端的操作，只能作为临时排查手段，不推荐作为最终解决方案。

你可以先试试第一种和第二种方法，我当时用第一种就解决了问题，要是不行再换第三种。毕竟Chrome的自动填充机制有时候确实有点“不讲理”😂

内容的提问来源于stack exchange，提问作者user1491646