某些浏览器保存密码之后,再次打开登录页面会自动回显账号密码问题

发布时间 2023-09-13 10:36:13作者: 伊人兮明眸秋水

解决方法:将输入框默认设为只读状态,当获取焦点的时候,再将自身的只读属性去除

例如:(使用的是Ant Design库里面的组件,vue2的项目)

 1                     <a-form-item>
 2                         <a-input 
 3                             read-only     // 只读属性
 4                             onfocus="this.removeAttribute('readonly');"    // 获取焦点时删除只读属性
 5                             size="large"
 6                             v-model="mobile"
 7                             type="text"
 8                             placeholder="请输入手机号">
 9                             <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
10                         </a-input>
11                     </a-form-item>
12                     <a-form-item>
13                         <a-input-password
14                             read-only 
15                             onfocus="this.removeAttribute('readonly');"
16                             v-model="password"
17                             size="large" 
18                             autocomplete="false" 
19                             placeholder="密码">
20                             <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
21                         </a-input-password>
22                     </a-form-item>