密码框点击切换input类型（代码实例讲解）

今天有个需求，就是常见的input框点击后边小眼睛，会显示输入的密码，现在把它单独拿出来，因为懒，所以用”=“来代替小眼睛。

效果图：

css代码部分：

*{
				padding: 0;
				margin: 0;
			}
			.p{
				border: 1px solid #e4393c;
				width: 270px;
				height: 30px;
				margin: 200px auto;
			}
			.psd{
				color: #fff;
				background-color: #E4393C;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
			}
			.inp{
				border: none;
				height: 26px;
			}
			.inp:focus{
				outline: none;
			}
			.eye:hover{
				cursor: pointer;
			}

html部分：

<p class="p" onselectstart="return false;">
			<span class="psd">密码框</span>
			<input type="password" class="inp"/>
			<span class="eye">=</span>
		</p>

js代码部分：

    var eye =document.querySelector(".eye");
            var inp = document.querySelector(".inp");
            var frag=true;
            eye.addEventListener("click",function(){
                if(frag){
                inp.setAttribute("type","text");
                frag=false;
                }else{
                inp.setAttribute("type","password");
                frag=true;
                }
            })