使用text类型的文本输入框模拟password类型的密码输入框

小鹿不在林间

已于 2023-07-02 22:07:29 修改

阅读量5k

点赞数 27

文章标签： javascript html5 vue.js

于 2022-02-24 11:38:58 首次发布

本文链接：https://blog.csdn.net/C_Chenshao/article/details/121390847

版权

在项目中因安全考虑禁止使用password类型输入框，本文介绍了五种替代方案，包括动态切换type、按键事件处理等，并重点讲解了一种兼容Chrome、Firefox和IE的实现方式，通过判断浏览器类型设置不同的输入事件。在实践中，虽然存在一些小问题，但能有效防止浏览器记住密码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目开发中要求不能直接使用password类型的密码输入框该怎么做？(干货直接跳例5)

最近有个项目，在做登录模块时，要求不让使用password类型的密码输入框，是为了防止报安全问题，因为password类型的密码输入框，容易被浏览器记住密码，很不安全。我在网上找了几种方法，效果也都不尽人意，那么在密码输入这一块，大家都是怎么做的呢？

1.动态切换type类型（还是会被谷歌浏览器记住密码,公司报安全问题）

网上有这么一种方法，初始时将输入框type类型设置为text，当文本框聚焦时，将type类型改为password，失去焦点时，再将type类型改为text，同时将明文密码用特殊符号替换。

html:

<div id="loginform">
    <div class="inputDiv common_flexBox common_flexBox_j_b common_flexBox_a_c">
        <img src="../image/pass.png" alt="" class="icon">
        <input type="text" name="textPass" maxlength="18" id="textHidePass" autocomplete="off" readonly="readonly" class="inpt common_flex1 common_box_sizing"/>
    </div>
    <div class="inputDiv common_flexBox common_flexBox_j_b common_flexBox_a_c">
        <img src="../image/pass.png" alt="" class="icon">
        <input type="text" name="" id="textPass" maxlength="18" autocomplete="off" placeholder="请输入密码" class="inpt common_flex1 common_box_sizing"
            oncopy="return false;" onpaste="return false;" oncut="return false;" ondrop="return false;" onselectstart="return false;" oncontextmenu="return false;"
            onfocus="changeType()" 
            onblur="resetType()"
            oninput="setPass()">
    </div>
</div>

js:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    function changeType(){
        //● //• //·
        //获取焦点时，将隐藏域的值赋值给密码输入框，同时将type类型改为"password"
        $("#textPass").val($("#textHidePass").val()).prop("type","password")
    }
    function resetType(){
        //失去焦点时将密码输入框的值替换为'•'，将type类型改回"text"
        $("#textPass").val($("#textPass").val().replace(/[^\•]/g,'•')).prop("type","text");
    }
    function setPass(){
         //输入时将密码输入框的值赋值给隐藏域
         $("#textHidePass").val($("#textPass").val());
    }
</script>

css:在文章的最后，公共css

于是我就上手体验了一番，发现输入时没有一点问题，但是submit提交的时候，竟然又被浏览器获取到密码了，额~，跟password类型没啥区别，肯定会报安全问题，pass。

2.使用按键的事件函数onkey