浏览器默认会对用户提交表单行为进行监控,若发现type属性值为password的input控件,且该控件可见时,会提示用户是否记住密码。
本文针对禁止浏览器记住密码的方法是:不使用type为password的输入框,根据每次输入值替换文本框内容为圆点。
<template>
<el-form :model="loginForm":rules="loginRules" ref="LoginformModel">
<el-form-item prop="username">
<el-input type="text" placeholder="Username" v-model="loginForm.username"/>
</el-form-item>
<el-form-item prop="word">
<el-input type="text" placeholder="Password" v-model="loginForm.word"
@input="replacePwd" @select="selectText" @keyup.delete="deleteText"
oncopy="return false" oncut="return false"/>
</el-form-item>
<el-form-item>
<el-button :loading="loading" @click="handleLogin" type="default">
<span v-if="!loading">Log in</span>
<span v-else>Please wait...</span>
</el-button>
</el-form-item>
</el-form>
</template>
密码框type为text,@input用于密码框中的值变化时触发的函数。
@select用于密码框内容被选中时触发的函数。
@keyup.delete用于密码框监听backspace、del按键松开的事件。
oncopy、oncut禁止复制及剪切。
const loginForm = ref({
username: '',
password: '',
word: '',
replacePwd: ''
})
let selectMark = false;
let selectStart = 0;
let selectEnd = 0;
let deleteStart = 0;
let deleteEnd = 0;
const deleteText = (value) => {
deleteStart = value.target.selectionStart
deleteEnd = value.target.selectionEnd
const pwdLength = loginForm.value.password.length;
let valueLength = value.target.value.length;
if ((pwdLength - valueLength) == 1) {
loginForm.value.password = loginForm.value.password.substring(0, deleteStart) +
loginForm.value.password.substring(deleteEnd + 1);
} else if ((pwdLength - valueLength) > 1) {
loginForm.value.password = selectMark ?
loginForm.value.password.substring(0, selectStart) + loginForm.value.password.substring(selectEnd) :
loginForm.value.password.substring(0, pwdLength - (pwdLength - valueLength));
}
const length = loginForm.value.password.length;
let rep = "";
if (length > 0) {
for (let i = 0; i < length; i++) {
rep += "●"
}
loginForm.value.word = rep;
loginForm.value.replacePwd = rep
} else {
loginForm.value.word = ""
loginForm.value.replacePwd = ""
}
selectMark = false;
selectStart = 0;
selectEnd = 0;
}
//密码框选中内容,开始及结束位置
const selectText = (e) => {
selectMark = true;
selectStart = e.target.selectionStart;
selectEnd = e.target.selectionEnd;
}
const replacePwd = (value) => {
const valueLength = value.length;
const pwdLength = loginForm.value.password.length;
//禁止输入中文及中文标点符号
let pwdCn = /[\u4E00-\u9FA5]/;
let specialChar = /[。?!,、;:“”‘’()《》〈〉【】『』「」﹃﹄〔〕…—~﹏¥]/;
if (pwdCn.test(value) || specialChar.test(value)) {
loginForm.value.word = loginForm.value.replacePwd
ElMessage({
message: h('p', null, [
h('span', null, t('loginMessage.useEnglish')),
]),
type: 'error',
})
return
}
const vra = value.replaceAll("●", "");
//删除字符
if (vra != "") {
const valArray = Array.from(value);
//首次输入
if (loginForm.value.replacePwd == "") {
loginForm.value.password = value
} else {
let startCount = 0;
let endCount = 0;
let startIndex = -1;
let endIndex = -1;
for (let i = 0; i < valueLength; i++) {
if (valArray[i] == "●" && startIndex == -1) {
startCount++
} else if (valArray[i] != "●" && startIndex == -1) {
startIndex = i
} else if (valArray[i] == "●" && startIndex != -1 && endIndex == -1) {
endIndex = i
endCount++
} else if (valArray[i] == "●" && endIndex != -1) {
endCount++
}
}
//密码框中没有●,全部替换
if (startCount == 0 && endCount == 0) {
loginForm.value.password = value;
} else if (startCount > 0 && endCount > 0) {
//头及尾是●,从中间插入或替换
loginForm.value.password = loginForm.value.password.substring(0, startCount) +
value.substring(startCount, valueLength - endCount) + loginForm.value.password.substring(
pwdLength - endCount)
} else if (startCount > 0 && endCount == 0) {
//头是●,从尾新增或替换
loginForm.value.password = loginForm.value.password.substring(0, startCount) + value.substring(startCount)
} else if (startCount == 0 && endCount > 0) {
//尾是●,从头新增或替换
loginForm.value.password = value.substring(0, valueLength - endCount) + loginForm.value.password
.substring(pwdLength - endCount, pwdLength)
}
}
} else {
return
}
const length = loginForm.value.password.length;
let rep = "";
if (length > 0) {
for (let i = 0; i < length; i++) {
rep += "●"
}
loginForm.value.word = rep;
loginForm.value.replacePwd = rep
} else {
loginForm.value.word = ""
loginForm.value.replacePwd = ""
}
}