今天有個(gè)需求,就是常見(jiàn)的input框點(diǎn)擊后邊小眼睛,會(huì)顯示輸入的密碼域滥,現(xiàn)在把它單獨(dú)拿出來(lái)膘壶,因?yàn)閼校杂谩?“來(lái)代替小眼睛掏婶。
先上效果圖:
html部分代碼:
<div class="div" onselectstart="return false;">
<span class="psd">密碼框</span>
<input type="password" class="inp"/>
<span class="eye">=</span>
</div>
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;
}
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寫的,歡迎指教批評(píng),謝謝啦摧莽。