今天有个需求,就是常见的input框点击后边小眼睛,会显示输入的密码,现在把它单独拿出来,因为懒,所以用”=“来代替小眼睛。
效果图:
css代码部分:
*{
padding: 0;
margin: 0;
}
.div{
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部分:
<div class="div" onselectstart="return false;">
<span class="psd">密码框</span>
<input type="password" class="inp"/>
<span class="eye">=</span>
</div>
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;
}
})
用原生js写的,欢迎指教建议。