当我们使用input,浏览器会对带有type="password"的input进行记住密码。
解决方法:
一,input的type改为text,然后修改样式
vue代码
<el-input v-model="password.checkPass" type="text"
class="no-autofill-pwd"
></el-input>
css代码
.no-autofill-pwd {
/deep/ .el-input__inner {
-webkit-text-security: disc !important;
}
}
这样type为text的输入样式就会变成圆点
二,可以自定义一个input,然后把输入的密码转换为圆点样式
在组件的目录下创建一个inp.vue文件
<template>
<div class="pw_input_cp el-input">
<input
class="el-input__inner"
placeholder="请输入密码"
ref="input"
@input="handleInput"
@compositionstart="handleCompositionStart"
@compositionend="handleCompositionEnd"/>
</div>
</template>
<script>
//自定义密码输入框
//input元素光标操作
class CursorPosition{
constructor(_inputEl) {
this._inputEl = _inputEl;
}
//获取光标的位置 前,后,以及中间字符
get(){
var rangeData = {
text: "", start: 0, end: 0 };
if (this._inputEl.setSelectionRange) {
// W3C
this._inputEl.focus();
rangeData.start = this._inputEl.selectionStart;
rangeData.end = this._inputEl.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? this._inputEl.value.substring(rangeData.start, rangeData.end) :