vue element 项目：谷歌浏览器自动填充input处理方案

项目中经常性的遇到当表单 form 里面有这种input框type=‘password’的时候，浏览器会自动填充input，情形就行一下这样：

亦或者：

很明显，这也太丑了！！！

解决方案：只需要添加onfocus="this.removeAttribute('readonly');" readonly，就不会自动填充。大概意思就是初始化为只读，当聚焦时去掉只读属性，只读可以防止浏览器自动填充。

因此，一个form表单里密码框之前的input框都这样添加：（注意：当表单没有密码框的时候不需要考虑）

// 用户输入框
<el-input 
	v-model="userForm.name" 
	autocomplete="off" 
	:show-word-limit="false" 
	maxlength="30" 
	clearable 
	placeholder="请输入用户姓名"
	readonly
	onfocus="this.removeAttribute('readonly');" 
>
<i
  v-if="userForm.name.length"
  class="el-icon-circle-close el-input__icon"
  slot="suffix">
</i>
</el-input>

// 密码输入框
<el-input 
	v-model="userForm.password" 
	:show-word-limit="false" 
	maxlength="30" 
	class="passwordInput"
	type="password"
	clearable 
	show-password 
	placeholder="请输入登录密码"
	readonly
    onfocus="this.removeAttribute('readonly');" 
></el-input>

第一步已经完成了，打开弹窗的时候已经不会自动填充了，当我们

仔细一看，使用浏览器手动填充的时候背景色和弹窗背景色不统一，这时就需要使用样式穿透调整这个背景色。

给type=‘password’的input框绑定一个类passwordInput，同时给密码框的上一个输入框也绑定一个类passwordInput。css样式如下：

<style lang="scss" scoped>
 :deep(input:-webkit-autofill) {
    
    
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
.passwordInput{
    
    
  :deep(.el-input__inner){
    
    
    height: 20px;
    line-height: 20px;
  }
}
</style>

似乎是感觉大功告成了，但是仍然有一个问题，就是我密码框是有显示右侧的眼睛图标和关闭图标的，但是手动填充后把它覆盖了，这可不行。

这时很纳闷了，咋回事，只能type=‘password’的input框去掉readonly onfocus="this.removeAttribute('readonly');"测试下，发现也没毛病，满足需求。

那么可能要问了，去掉了岂不是又要填充了吗，

不会的，当其他input框都是只读状态，只有一个密码框不是，浏览器就不会自动填充的。自动填充是需要有两个input框去承载浏览器的用户名和密码的。而且用户名的这个input框必须在密码框前面才会受到填充，后面的邮箱输入框和手机号码输入框其实是不受影响的。

当然没有最好，只有更好，还有更好的方案和想法欢迎留言！