输入密码时点击明文密文变化

本文主要是介绍输入密码时点击明文密文变化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        <style>.box{position: relative;width: 400px;  //宽度border-bottom: 1px solid #ccc;  //设置下边框margin: 100px auto ;}.box input{width: 370px;  //输入框宽度height: 30px;  //高度border: 0;   //输入框边框0outline: none;}.box img{position: absolute; //子绝父相top: 10px;right: 2px;width: 20px;}</style>

CSS代码展示

       <div class="box"><label><img src="img/bi.jpg" id="tu" /></label><input type="password " id="pwd" /></div>

HTML代码

       <script>var tu = document.getElementById('tu');  //获取tu和pwdvar pwd = document.getElementById('pwd');var flag = 0;  //定义一个flagtu.onclick = function(){//判断if(flag == 0){pwd.type = "text";tu.src = "img/zheng.jpg";flag = 1;}else{pwd.type = "password";tu.src = "img/bi.jpg";flag = 0;}}</script>

首选还是利用id获取tu和pwd

赋值一个flag=0

设置点击事件

利用if语句判断，如果flag==0，则点击后变成明文，即pwd.type样式改成文本框text，同时赋值flag=1

反之，如果flag==1，则点击后变成密文，即pwd.type样式改成文本框password，同时赋值flag=0

注：仅限于个人理解，用于学习。

这篇关于输入密码时点击明文密文变化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---