antd pro ProForm 去除自动填充不生效

亦凉 2023-10-05 21:50 40阅读 0赞

## antd pro ProForm去除chrome自动填充不生效 ##

--------------------

chrome对表单会自动填充，特别对 username、password、email。相信chrome初衷是好的，但对开发制造了不少麻烦。

#### 文章目录 ####

*  antd pro ProForm去除chrome自动填充不生效
 *  前言
 *  一、问题
 *   *  1.1 使用 \`ProFormFields\`中\`ProFormText\` 和 \`ProFormText.Password\`实现表单
 *  二、解决方案
 *  总结

--------------------

## 前言 ##

今天写一个新增用户的表单，有两个属性对chrome很敏感，它们是用户名（`username`）、密码（`passward`），很顺利在chrome上它表现了自己的独特性：这两个字段自动填充。下面一起看看问题及解决方案。

--------------------

## 一、问题 ##

### 1.1 使用 `ProFormFields`中`ProFormText` 和 `ProFormText.Password`实现表单 ###

*  代码

*  表现  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16]  
    可以看到页面渲染结束后，回显了该站点下的**用户名**和**密码**。打开控制台，我们会发现它报了如下错误。  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[DOM] Found 2 elements with non-unique id #email: (More info: https://goo.gl/9p2vKq)
     <input placeholder="请输入" id="email" type="text" class="ant-input" value>
     <input placeholder="请输入" id="email" type="text" class="ant-input" value>
    user:1 [DOM] Found 2 elements with non-unique id #name: (More info: https://goo.gl/9p2vKq) 
     <input placeholder="请输入" id="name" type="text" class="ant-input" value> 
     <input placeholder="请输入" id="name" type="text" class="ant-input" value>
    user:1 [DOM] Found 2 elements with non-unique id #username: (More info: https://goo.gl/9p2vKq) 
     <input placeholder="请输入" id="username" type="text" class="ant-input" value> 
     <input autocomplete="off" placeholder="请输入" id="username" type="text" class="ant-input" value="admin">

## 二、解决方案 ##

原因就不赘述了，解决方案就是给input增加`autoComplete`属性，并给其设置合适的值。阻止自动填充有两种值：`off` 和 `new-password` 两种选择，`off` 使用在旧版浏览器上，`new-password` 使用在新版浏览器上。

从代码中可以发现设置的`fieldProps={ { autoComplete: 'off' }}`  
根本没有生效。即使改成 `fieldProps={ { autoComplete: 'new-password' }}`也不能生效。由此可以断定 `ProFormFields`中`ProFormText` 和 `ProFormText.Password` 中设置的 `autoComplete` 不能生效。

因此我们尝试下面方式

*  代码

<Form.Item
            label="用户名"
            name="username"
            rules={[{
          required: true }]}
            hasFeedback
            tooltip="用于用户登录的名称，建议使用英文字母/数字组合"
          >
            <Input autoComplete="new-password" ></Input>
          </Form.Item>
          <Form.Item
            label="密码"
            name="password2"
            rules={[{
          required: true }]}
            hasFeedback
            initialValue="123456"
            tooltip="默认初始密码为：123456"
          >
            <Input.Password autoComplete="new-password" ></Input.Password>
          </Form.Item>

*  效果  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
    可以看出，显示正确了。  
    但是那个表单重复的问题依然存在  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16 3]

--------------------

## 总结 ##

该文记录了采用`Antd Pro` 中`ProFormText` 和 `ProFormText.Password` 时`autoComplete` 不生效的问题，同时给出了解决方案。  
文中提到对于不同版本的chrome浏览器，其值不一样，因此如果小伙伴们写的是一个开放性软件，就要注意处理浏览器版本问题，使其能赋予正确的值（ `off` 或 `new-password` ）

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/17654fdcce914f0e9aaf044fc56892b1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5a2Q5a6d5LiB,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/19f1ef069463450995d53113e4c2fd37.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5a2Q5a6d5LiB,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/a95a65af8ba44dd68491992ed681351e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5a2Q5a6d5LiB,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5a2Q5a6d5LiB_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/7d6feb6bdf9b4eeeb4b2f3595d5f46fe.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5a2Q5a6d5LiB,size_20,color_FFFFFF,t_70,g_se,x_16