chrome对表单会自动填充,特别对 username、password、email。相信chrome初衷是好的,但对开发制造了不少麻烦。
今天写一个新增用户的表单,有两个属性对chrome很敏感,它们是用户名(username
)、密码(passward
),很顺利在chrome上它表现了自己的独特性:这两个字段自动填充。下面一起看看问题及解决方案。
问题
使用 ProFormFields
中ProFormText
和 ProFormText.Password
实现表单
代码
<ModalForm title="新建" ... > <ProFormText width="md" name="user" label="账号" placeholder="请输入账号" rules={[ { required: true, message: '请输入账号', }, ]} /> <ProFormText.Password width="md" label="密码" name="password" rules={[ { required: true, message: '请输入密码', }, ]} placeholder="请输入密码" /> </ModalForm>
现象
可以看到页面渲染结束后,回显了该站点下的某个用户名和密码。
解决方案
原因就不赘述了,解决方案就是给 ProFormText 组件增加autoComplete
属性,并给其设置合适的值。阻止自动填充有两种值:off
和 new-password
两种选择,off
使用在旧版浏览器上,new-password
使用在新版浏览器上。
<ProFormText width="md" name="user" label="账号" placeholder="请输入账号" fieldProps={{ autoComplete: 'off', }} rules={[ { required: true, message: '请输入账号', }, ]} /> <ProFormText.Password width="md" label="密码" name="password" fieldProps={{ autoComplete: 'new-password', }} rules={[ { required: true, message: '请输入密码', }, ]} placeholder="请输入密码" />