JavaScript账号密码输入框

最新推荐文章于 2023-11-23 13:04:56 发布

只想陪你吹海风

最新推荐文章于 2023-11-23 13:04:56 发布

阅读量867

点赞数

文章标签： javascript 开发语言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_53162363/article/details/131269061

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            height: 40px;
            width: 300px;
            border: 1px solid black;
        }
        
        .box input {
            width: 200px;
            /*height:40px;*/
            border: 0;
            outline: none;
        }
        
        img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
            height: 24px;
        }
    </style>
</head>

<body>
    <div class='box'>
        <input type="password" value=''>
        <img src="./img/close.png" alt="">
    </div>

    <script>
        var flag = 1;
        var Oipt = document.querySelector('input');
        var Oimg = document.querySelector('img');
        Oimg.onclick = function() {
            if (flag === 1) {
                Oimg.src = './img/open.png';
                //修改标签的属性
                Oipt.type = 'text'
                flag = 0
            } else {

                Oimg.src = './img/close.png';
                //修改标签的属性
                Oipt.type = 'password'
                flag = 1
            }
        }
    </script>
</body>

</html>

只想陪你吹海风

博客等级

码龄4年

8
原创

51
点赞

99
收藏

124
粉丝

关注

私信

热门文章

最新评论

JavaScript网页内图片跟随鼠标移动
2301_82071409: 快要疯掉了，不知道为什么照着copy也报错，只能出现图片，但是没有办法跟着鼠标动T-T
JavaScript三分钟~三小时复习
CSDN-Ada助手: 恭喜你写下了第一篇博客！很高兴看到你对JavaScript有着浓厚的兴趣，并愿意分享你的学习心得。建议你可以继续深入学习，探索JavaScript更多的特性和应用场景，同时也可以分享你的实战经验和代码示例，让读者更好地理解和应用。期待看到你更多的精彩博客！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！
JavaScript简易学生信息管理
CSDN-Ada助手: 非常感谢您分享这篇关于JavaScript学生信息管理的博客！我很高兴看到您对这个主题有着深入的研究和思考。您的博客内容清晰易懂，让读者很容易掌握JavaScript学生信息管理的基本知识。希望您能够持续不断地创作和分享更多有价值的内容。另外，如果您想进一步拓展自己的知识和技能，可以学习一些相关的技术，比如数据库的设计和管理、前端框架的使用、网络安全等等。这些知识和技能都可以为您的学生信息管理系统增加更多的功能和安全性。再次感谢您的分享，期待您的下一篇博客！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！
JavaScript账号密码输入框
CSDN-Ada助手: 恭喜你又写了一篇关于JavaScript的好文章！我很喜欢你提供的关于账号密码输入框的解决方案。不过，我认为你可以进一步探索这个主题，比如如何在输入框中添加验证规则，或者如何使用JavaScript实现更高级别的加密功能。期待你的下一篇文章！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
注册信息基础控件
CSDN-Ada助手: 恭喜你写了这篇关于注册信息基础控件的博客！非常感谢你分享这个主题，我学到了很多。我想提供一些建议，希望你能在下一篇博客中涵盖更多的内容，例如：如何设计一个用户友好的注册页面、如何保障用户的隐私和数据安全等等。继续写作，加油！ CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。