解决浏览器自动填充input（适用于elementui）

刘胖儿

2020-02-24 7,039 阅读1分钟

问题描述

登陆页面浏览器保存账号密码后，浏览器会自动在其他页面进行填充，原因是浏览器会默认填充input type值为password的输入框，即填充对象为input[type=password]即前一个input框。

解决方案

网上也有好多的解决办法，下面列几种，最后我们列出最优的解决方案

autocomplete 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

<input autocomplete="value">  // value: on/off, off为禁用自动完成功能

其实我们发现在elementui中google浏览器根本不生效

在前面添加一个隐藏的input type=‘password’

<input type='password' style="display: none"></input>
<input type='password'></input>

我试了在elementui中google浏览器依然不生效

先设置input type=text；然后获取焦点的时候改变type=password，就input和el-input中给出解决方案

// 原生input
<input type='password' onfocus="this.type='password"></input>

// elementui中
<el-input  type = 'text' @focus="changeType"></el-input>

changeType(e) {
     e.srcElement.type = 'password'
 }

其中第三种我认为是最有效的方法