本文主要是介绍输入密码时点击明文密文变化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<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
注：仅限于个人理解，用于学习。
这篇关于输入密码时点击明文密文变化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
