js显示与隐藏密码明文案例

最新推荐文章于 2024-03-11 18:00:14 发布

I Have.

最新推荐文章于 2024-03-11 18:00:14 发布

阅读量3k

点赞数

分类专栏：笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_62937694/article/details/121180850

版权

笔记专栏收录该内容

23 篇文章 1 订阅

订阅专栏

这篇博客介绍了一个JavaScript实现的功能，通过点击事件监听，使得文本框和密码框可以相互切换，同时改变图像路径。利用一个全局变量flag来判断当前状态，并在每次点击后反转其值，从而实现不同状态的切换。此功能适用于增强用户界面交互体验。

摘要由CSDN通过智能技术生成

这个案例核心是：通过点击事件click，每点击一次，让文本框和密码框交换，相应的也改变图片路径，用一个全局变量，来帮助判断条件，在每次判断完之后，注意要让变量取反；代码如下：

<body>
    <div class="box">
      
        <label for="">
            <img src="img/yin.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        // 1、获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2、注册事件 处理程序
        var flag = 0;  //利用变量，赋值0或1来判断条件，
        eye.onclick = function() {
            // 点击一次，flag一定要变化  ，点击一次，执行一次函数内部的代码
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'img/xian.png'
                flag = 1;
            }else {
                pwd.type = 'password';
                eye.src = 'img/yin.png'
                flag = 0;
            }
        }

    </script>
</body>

I Have.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js显示与隐藏密码明文案例

这个案例核心是：通过点击事件click，每点击一次，让文本框和密码框交换，相应的也改变图片路径，用一个全局变量，来帮助判断条件，在每次判断完之后，注意要让变量取反；代码如下：<body> <div class="box"> <label for=""> <img src="img/yin.png" alt="" id="eye"> </label>
复制链接

扫一扫