使用js仅实现密码框信息的显示是简单的,重点在点击显示密码后再实现点击隐藏的效果
这里通过标记法实现。定义了一个flag=false的变量,在编写点击效果时,使!flag,此时flag=true,进行判断,true时实现显示效果,false时实现隐藏效果。
代码如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 40px;
position: relative;
}
#password{
width: 300px;
height: 30px;
}
#box div{
width: 20px;
height: 20px;
position: absolute;
background: url(./icon_1.png) no-repeat;
top: 7px;
right: 10px;
}
#box div.hover{
background: url(./icon_2.png) no-repeat;
}
</style>
</head>
<body>
<div id="box">
<div id="img"></div>
<input type="password" name="" id="password">
</div>
<script>
var img = document.querySelector('#img');
var input = document.querySelector('#password');
var flag = false;
img.onclick = function(){
flag = !flag;
if(flag){
this.className = 'hover';
input.type = 'text';
}else{
this.className = '';
input.type = 'password';
}
}
</script>
</body>
效果如下: