点击按钮显示明文密码

错言语

于 2021-10-29 01:46:57 发布

阅读量1.2k

点赞数 1

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/qq_46150052/article/details/121026910

版权

本文介绍了如何通过点击按钮实现密码输入框的明文与密文切换功能。核心思路是利用CSS3，点击眼睛按钮改变密码框的类型，从而达到查看密码明文的效果。通过设置一个标志位flag，控制按钮的两次点击状态，实现密码框在文本框和密码框之间的切换。

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

点击按钮将密码切换成文本框，并可以查看密码明文

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

   <style>
        .box {
     
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
     
            width: 370px;
            height: 30px;
            border: 0;
            outline