前端js 伪密码输入框 实现让浏览器不能保存密码

             web网页中 担心密码泄露，我们可以使用token缓存代替密码存储在浏览器，每次登录需要账号密码，返回token。这样密码只有登录的操作瞬间暴漏。，登录成功之后即使token被窃据，异地把我们合法登录的这边踢掉之后，我们如果合法使用账号密码再次登录，非法的token就会自动失效。 

            但是这仍然·存在一个致命的问题，在我们操作 password 类型输入框的时候，浏览器会自动识别记录账号密码。 提示是否保存。 当我们的项目可以确定不让浏览器保存时候，就不想每次有一个冗余操作去设置是否保存密码。 如果输入框类型不是password类型，就不会被浏览器识别，不会再询问。 

            普通的输入框没有输入保护功能，输入时候没有 **** 密文显示。 所以我利用自动监控用户输入内容的方式。使用text类型输入框 实现了和password类型一样实现了密文显示效果：

// 这里考虑了缓存元素, 如果不缓存元素，在函数内部用id查找元素也可以。 
realIdInput = document.getElementById('realIdInput')
passId = document.getElementById('passId')
initPasswd(passId, realIdInput)

function initPasswd(passId, realIdInput) {
    passId.addEventListener("input", function() {
        var v = this.value;  // 获取输入框的值
        var r = realIdInput.value; // 获取真实的密码
        var cursorPos = this.selectionStart; // 获取当前光标位置
        if (v.length > r.length) {
            let sub_start = cursorPos - (v.length -r.length)
            let sub_end = cursorPos
            let new_data = v.substring(sub_start, sub_end)
            r = r.slice(0, sub_start) + new_data + r.slice(sub_start+1);
        } else {
            if (v.length < r.length) {
                let diff = r.length - v.length;  // 获取删除了几个字符
                let start = cursorPos;
                r =  r.slice(0, start) + r.slice(start+diff); // 如果输入框内容变短，截取真实密码-
            }
        }
        realIdInput.value  = r;
        v = ""; // 清空输入框中的文本
        for (var i = 0; i < r.length; i++) {
            v += "•"; // 为每个字符添加掩码字符
        }
        this.value = v;   // 设置掩码后的值
            this.setSelectionRange(cursorPos, cursorPos);    // 恢复光标位置
        });
}

        这里判断用户光标的位置和对比数据的长度，实时同步密文输入框的内容到隐藏的明文输入框， 后续和后端交互时候我们可以使用明文输入框的值来传递。，然后是适当的时候可以清空明文输入框，用token本地存储代替密码的缓存。

       目前使用中没有输入内容不一致的情况发生。 

// 为了防止产生习惯性错误，把密文的伪输入框当做真输入框去获取
//value提交数据，我们可以写一个让明文输入框更加有语意，或者 使用：

function get_pass_word(){  
// 这样的方法来作为一种习惯，既可以
//很明显的区别当前项目使用了不同的输入框，又可以防止习惯性的 错误
    return realIdInput.value
}

你们认为我这个实现的怎么样？评论区聊聊吧！！！