前端js实现密码块的显示与隐藏（按钮）

10Eugene

于 2019-11-16 16:29:26 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 JavaScript 文章标签：前端 js 密码

本文链接：https://blog.youkuaiyun.com/EEEugene/article/details/103099976

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页上密码输入框显示与隐藏功能的方法。通过修改输入框的type属性，用户可以自由切换密码的显示状态，增强用户体验。代码简单易懂，适合初学者学习。

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

最近老师上课有讲到这个问题，写了就顺便就发出来吧
js部分

<script type="text/javascript">
        window.onload=function(){
            var oPass= document.getElementById('pass');
            var oBtn=document.getElementById('btn');
            var a=true;
        
        oBtn.onclick=function(){
            if (a) {
                oPass.type='text';
                a=false;
                oBtn.value='隐藏';
            }else{
                oPass.type='password';
                a=true;
                oBtn.value='显示'
            }
        };
    };
    </script>

html部分

<h2>js模拟实现密码显示隐藏</h2>
        <form >
            请输入密码：<input type="password" id="pass">
            <input type="button" value="显示" id="btn">
        </form>

参考文章：https://blog.youkuaiyun.com/neverST/article/details/52583152