解决浏览器保存密码自动填充问题

当浏览器遇到type="text"与type="password"的input标签紧邻时，会触发浏览器自动填充行为。默认为黄色背景。

1. 既然浏览器遇到type="text"与type="password"的input标签紧邻时触发自动填充行为，则将两个input隔开，使用隐藏的方式“欺骗”浏览器，将密码信息填写在隐藏区域。

.is-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

复制代码 /让input看不见，而不是直接display: none，如果直接display: none，有些浏览器则不生效，比如谷歌/

<input  type="text"  class="is-hidden" />
<input  type="password"  class="is-hidden" />

2. 修改readonly属性

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

复制代码将表单输入设为可读模式，浏览器自动填充就失效了，在焦点在该表单输入的时候再将可读属性移除

3.第三方组件 ProFormText
设置 autoComplete:‘new-password’,

    <ProFormText.Password
          name="newPassword"
          fieldProps={{
            id:'newPassword',
            autoComplete:'new-password',
            size: 'large',
            prefix: <LockOutlined className={styles.prefixIcon} />,
          }}
          placeholder={'设置新密码'}
          rules={[
            {
              required: true,
              message: '请填写新密码！',
            },
            {
              pattern:
                /^[\u4E00-\u9FA5A-Za-z0-9`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]{8,20}$/,
              message: '请输入8-20位字母/数字/标点符号',
            },
          ]}
        />