前言
在chorme浏览器中，若浏览器保存了网页的用户名密码，当点击密码输入框时，会展示如下下拉提示框：
通过观察发现，当input输入框中type=‘password’时，会显示此下拉框，这是浏览器阵队密码框的友好提示。
需求要求把此下拉框隐藏不显示，参考众多方法，逐一尝试，接下来介绍三种解决此问题的方法：
第一种
为了友好操作，保存可以明文也可以加密展示用户名和密码的功能，代码如下：
Template：
<el-form-item label="密码" prop="userPassword"> <el-input v-model="formData.userPassword" auto-complete="new-password" class="userPassword" type="text" placeholder="请输入由大小写字母、数字、特殊符号三种以上组合的8至16位密码" @input="changeInputValue()"> <i :class="changeShowIcon" slot="suffix" @click="changeShow"></i> </el-input> </el-form-item>
JS：
data() {
return {
changeShowIcon: 'el-icon-view', // 明文展示和以*号展示密码时输入框最右侧图标样式
aflag: true, // 是否加密展示
formData: { savePassword: '' } // 初始化保存明文的字段
}
}
// 改变输入框最右侧图标样式，改变展示给用户输入框的内容为明文或加密
changeShow() {
this.aflag = !this.aflag
if (this.aflag === true) {
// 加密
this.formData.userPassword = this.formData.userPassword.replace(
/./g,
'*'
) // 输入框内容全部变为*
this.changeShowIcon = 'el-icon-view'
} else {
// 明文
this.formData.userPassword = this.formData.savePassword
this.changeShowIcon = 'el-icon-circle-close'
}
},
changeInputValue() {
const value = this.formData.userPassword // 输入的时候获取输入框的值
this.formData.savePassword += value.substr(value.length - 1, 1)
// 获取最后一个字符加到到str,因为除了最后一个字符，其他的已经为*
if (this.aflag === true) {
this.formData.userPassword = value.replace(/./g, '*')
} // 当加密展示时输入框内容全部变为*
}
显示结果：
当以明文展示密码时：
获得的数据：
测出bug：
当在输入时，删除修改输入的字符，则保存的明文字段会出错。
bug示例：
经测试，此方法兼容IE，暂时未想到处理此bug方法，暂时保存这个思路。
第二种
思路为为初始化页面时，input输入框设置type为text，当点击右侧图标时，可以将type的值设为password。
代码如下：
Template：
<el-form-item label="密码" prop="userPassword"> <el-input v-model="formData.userPassword" auto-complete="new-password" class="userPassword" :type="userPasswordType" placeholder="请输入由大小写字母、数字、特殊符号三种以上组合的8至16位密码"> <i :class="changeShowIcon" slot="suffix" @click="changeShow"></i> </el-input> </el-form-item>
JS：
data() {
return {
userPasswordType: 'text', // 设置输入框的类型
changeShowIcon: 'el-icon-view', //输入框图标样式
aflag: true, // 是否明文展示
}
}
changeShow() {
this.aflag = !this.aflag
if (this.aflag === true) {
// 明文展示
this.userPasswordType = 'text'
this.changeShowIcon = 'el-icon-view' // 输入框内容全部变为*
} else {
// 加密展示
this.userPasswordType = 'password'
this.changeShowIcon = 'el-icon-circle-close'
}
}
明文时：
加密时：
测出bug：
这种方法只是处理了一开始进入页面时展示的弹出框，之后也会显示出来，暂时保留此思路。
第三种
参考多个解决方法，知道了chrome填充密码的原理是寻找name相同的password框进行填充，所以在不需要记住密码的页面放一个name跟登陆时相同的的input框就可以了，在密码框上方加一个和真正密码输入框同样name的input，并设置display：none ，或者通过定位功能让它看不见，这样浏览器的记住密码功能就失效了。
代码如下：
Template：
<input type="password" name="password" style="position: absolute;left: -10000px;"> <el-form-item label="密码" prop="userPassword"> <el-input v-model="formData.userPassword" auto-complete="off" show-password type="password" placeholder="请输入由大小写字母、数字、特殊符号三种以上组合的8至16位密码"> </el-input> </el-form-item>
