jsp代码:
<form action="" method="post">
<table>
<tr>
<td>
<input class="wbk" type="password" name="password" value="1" id="password">
<img class="eyes" id="eyes" alt="" src="images/eyes_hide.png" onclick="change()">
</td>
</tr>
</table>
</form>
css样式:
.wbk {
width: 200px;
height: 30px;
border-radius: 20px;
font-size: 30px;
}
.eyes{
position: absolute;
width: 30px;
height: 30px;
right:15px;
top:0px;
}
td{
position: relative;
}
js代码:
var isShow=true;
function change(){
var password=document.getElementById("password");//通过id获取密码框
var eyes=document.getElementById("eyes");//通过id获取图片
if (isShow) {//判断是否为显示ture为显示false为不显示
password.type="text";
isShow=false;
eyes.src="images/eyes_show.png";
}else{
password.type="password";
isShow=true;
eyes.src="images/eyes_hide.png";
}
}