自定义网页密码输入框，以实现禁止浏览器保存密码

qq_36765991

已于 2023-06-04 11:13:52 修改

阅读量919

点赞数 2

分类专栏： html 密码框 js 文章标签： html javascript

于 2023-06-04 10:58:47 首次发布

本文链接：https://blog.csdn.net/qq_36765991/article/details/131029268

版权

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

密码框

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

通过js代码手动实现密码输入框

概述

因为安全问题需要禁止浏览器保存密码，而浏览器是通过input的type='password’识别是否保存密码的，所以只需要将type变成text，然后使用js代码手动实现即可。使用网上的方法基本都失败，所以还是自己实现不偷懒了。

前端页面

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form method="post" action="index1.html">
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" placeholder="账号">
    <label for="passwordDisc">密码</label>
    <!--显示特殊符号，禁止复制、截切、右击、文本提示-->
    <input type="text" id="passwordDisc" placeholder="密码" oncopy="return false;"
           oncut="return false;" oncontextmenu="return false;" autocomplete="off" autocorrect="off">
    <!--密码真实保存位置-->
    <input type="text" style="visibility: hidden;border: 0;height: 0;width: 1px;padding: 0;margin: 0" name="password"
           id="password" placeholder="密码">
    <button type="submit" id="submit">提交</button>
</form>
<script src="login.js" type="text/javascript"></script>
</body>
</html>

js代码

var passwordDisc = document.getElementById("passwordDisc");
var password = document.getElementById("password");
// 键盘按下执行,主要用于删除操作
passwordDisc.addEventListener("keydown", function (event) {
    // 后面事件会改变，所以先记录选择的文本坐标
    this.selectStartIndex = this.selectionStart;
    this.selectEndIndex = this.selectionEnd;
    if (event.key === 'Backspace') { // 如果是退格键
        if (this.selectionStart === this.selectionEnd) {// 未选择文本
            var str1 = password.value.substring(0, this.selectionStart - 1);
            var str2 = password.value.substring(this.selectionStart);
            password.value = str1 + str2;
        } else { // 选择了文本
            var str1 = password.value.substring(0, this.selectionStart);
            var str2 = password.value.substring(this.selectionEnd);
            password.value = str1 + str2;
        }
    } else if (event.key === 'Delete') { // 如果是删除键
        if (this.selectionStart === this.selectionEnd) {// 未选择文本
            var str1 = password.value.substring(0, this.selectionStart);
            var str2 = password.value.substring(this.selectionStart + 1);
            password.value = str1 + str2;
        } else { // 选择了文本
            var str1 = password.value.substring(0, this.selectionStart);
            var str2 = password.value.substring(this.selectionEnd);
            password.value = str1 + str2;
        }
    }
});

// 输入事件，保存密码
passwordDisc.addEventListener("input", function (event) {
    if ((event.data || event.data != null || event.inputType === 'insertFromPaste') && event.inputType !== 'insertCompositionText') {
        // 输入有数据或者是粘贴操作，并且不是中文输入
        var data = event.data || event.data != null ? event.data : this.pasteString;
        // 除ascii里的都替换为空，避免粘贴有其他符号
        data = data.replace(/[^\x00-\x7e]/g, '');
        var str1 = password.value.substring(0, this.selectStartIndex);
        var str2 = password.value.substring(this.selectEndIndex);
        password.value = str1 + data + str2;
    }
    // 文本框密文显示
    passwordDisc.value = password.value.replace(/./g, '*');
    console.log(password.value);
})
// 获取粘贴板的文本数据
passwordDisc.addEventListener("paste", function (event) {
    this.pasteString = event.clipboardData.getData('text/plain');
})

结论

通过尝试是可行的，如果不想有人f12显示密码可以使用js代码保存而不是隐藏的文本框，而且这种方法基本上是支持所有浏览器。但是经过测试谷歌浏览器在对中文输入是会存在一个小bug，但不影响，我猜测是谷歌浏览器本身自带的bug，因为代码逻辑上是没有问题的。

qq_36765991

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
自定义网页密码输入框，以实现禁止浏览器保存密码

因为安全问题需要禁止浏览器保存密码，而浏览器是通过input的type='password’识别是否保存密码的，所以只需要将type变成text，然后使用js代码手动实现即可。使用网上的方法基本都失败，所以还是自己实现不偷懒了。
复制链接

扫一扫