vue项目解决页面登录时，禁止浏览器提醒是否保存密码

绝对零度HCL

已于 2022-08-02 17:42:05 修改

阅读量3.3k

点赞数

分类专栏： vue JavaScript 文章标签： js javascript vue vue.js

于 2020-08-15 21:00:52 首次发布

本文链接：https://blog.csdn.net/cheng521521/article/details/108028165

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

vue

24 篇文章 0 订阅

订阅专栏

主要思路

1.通过input输入框，监听输入值，进行替换成*符号，避免使用input的type="password"类型，造成浏览器提醒是否记住密码；
如果是vue、react等项目请自行改造一下代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./jquery.min.js"></script>
<body>
    <form id="forLogin" method='post' onsubmit="return mdFive();">
        <table>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td align="left" class="text">
                                <div class="text_user">用户名:</div>
                            </td>
                            <td><input id="input_text_user" name="user" type="text" autocomplete="off" />&nbsp;&nbsp;</td>
                        </tr>
                        <tr>
                            <td align="left" class="text">
                                <div class="text_user">密码:</div>
                            </td>
                            <td id="textOrPsw">
                                <input id="inputText" name="pswView" type="text" autocomplete="off" />&nbsp;&nbsp;</td>
                            <td>
    <!-- 此处可以隐藏或将值放到变量中 -->
                                <input name="psw" id="psw" type="text" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" id="submit" value="" />
                    <input type='hidden' name='ACTION' value='SUBMIT' />
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    $(document).ready(function () {
        var inputEle = $('#inputText');
                inputEle.on("keydown", handlerKeydown);
        inputEle.on("input", handlerPassword);
        var cursorStart = 0;
        var cursorEnd = 0;
        function handlerKeydown() {
            cursorStart = inputEle[0].selectionStart;
            cursorEnd = inputEle[0].selectionEnd;
            console.log(cursorStart,cursorEnd)
        }
        function handlerPassword(e) {
            var loginForm = document.getElementById("forLogin");
            var old_input = loginForm.pswView.value;
            var display_input = old_input;
            var hide_input = loginForm.psw.value.split("");
            if(e.originalEvent.data === ' ') {
                console.log('过滤空格');
                loginForm.pswView.value = hide_input.join("").replace(/./g,'*');
                return
            }
            var start = inputEle[0].selectionStart;
            var length = Math.abs(cursorEnd - cursorStart);
            console.log('cursorEnd - cursorStart: ' + length)
            console.log('cursorEnd:' + cursorEnd + ' ,cursorStart: '+ cursorStart + ' ,start:' + start)
            if (length == 0) {
                if (display_input.length < hide_input.length) {
                    console.log('单个删除')
                    hide_input.splice(start, 1);
                } else {
                    console.log('添加')
                    hide_input.splice(cursorEnd, 0, display_input.slice(cursorEnd,start));
                }
            } else {
                if (display_input.length < hide_input.length && cursorStart === start) {
                    hide_input.splice(start, length);
                    console.log('选中删除');
                } else {
                    console.log('替换')
                    hide_input.splice(cursorStart, length, display_input.slice(cursorStart,start));
                }
            }
            var viewPsdValue = "";
            var psdValue = "";
            for (var i = 0; i < old_input.length; i++) {
                viewPsdValue += "*";
            }
            psdValue = hide_input.join("");
            console.log('密码结果: ' + psdValue +'')
            loginForm.pswView.value = viewPsdValue;
            loginForm.psw.value = psdValue;
            inputEle[0].selectionStart = start;
            inputEle[0].selectionEnd = start;
        }
    });
    
</script>
</html>

绝对零度HCL

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue项目解决页面登录时，禁止浏览器提醒是否保存密码

主要思路1.通过input输入框，监听输入值，进行替换成*符号，避免使用input的type="password"类型，造成浏览器提醒是否记住密码；如果是vue、react等项目请自行改造一下代码！vue项目解决页面登录时，禁止浏览器提醒是否保存密码......
复制链接

扫一扫