VUE3登录禁止浏览器记住密码

浏览器默认会对用户提交表单行为进行监控，若发现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 = ""
    }
}