Element和AntD表单自动填充账号密码，如何清除？

河畔一角2023-07-31 16:28

背景

最近有业务向产品反馈，每次点击文本框或者下拉框时，都会自动填充一堆账号密码，严重影响系统的使用体验，于是产品咨询前端开发，希望把这个问题处理掉。

问题截图如下：

问题修复

Element的表单组件如el-input和el-select等，在中后台系统中，往往都会自动填充曾登录过的账号密码。

网上实际上有很多方案，但是几乎没有找到一个靠谱的，比如：

修改type=search，经验证：无效。
修改autocomplete="off"，经验证：无效。
修改autocomplete="new-password"，经验证：无效。
使用脚本处理密码输入框，根据输入内容进行分割处理。可以解决，但开发过于复杂，同时账号自动填充并不仅仅发生在密码框中，文本框也会自动填充。

目前发现有一种相对简单的做法：

在文本框的下面再定义一个文本框，但是需要屏蔽文本框不显示。

html 复制代码

<el-select
  v-model="currentCompany"
  filterable
  placeholder="请选择"
  style="border-radius:2px;overflow:hidden;"
>
  <el-option
    v-for="(item, index) in authStaffComList"
    :key="index"
    :label="item.name"
    :value="item.id"
  >
  </el-option>
</el-select>
</template>
<!-- 解决账号被自动填充问题 -->
<el-input type="text" style="position: absolute;z-index: -999;"/>

为了不影响业务功能，需要设置样式，隐藏该文本框。

html 复制代码

<!-- 解决账号被自动填充问题 -->
<el-input type="text" style="position: absolute;z-index: -999;"/>

页面测试，通过

再次点击下拉框，填充密码消失，问题解决。

为什么？

其实，我们并没有彻底解决，我们只是做了移花接木，不信你看。

打开网站，隐藏索引

关闭z-index后，文本框会显示出来。

点击文本框，密码又出来了。

所以，我们只是把账号密码填充功能，移到了另外一个文本框上面而已，本身并没有通过技术的手动彻底解决浏览器自动填充问题。

末尾

好了，我是河畔一角，一个普通的前端工程师。记录一个小问题，希望能够帮到遇到同样问题的你，祝你生活愉快，前程似锦。