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

最新推荐文章于 2024-04-27 05:36:48 发布

原创最新推荐文章于 2024-04-27 05:36:48 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js #密码

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

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

该文章已生成可运行项目，

最近老师上课有讲到这个问题，写了就顺便就发出来吧
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

本文章已经生成可运行项目