A simple password box case written by self-taught, set a small eye icon button to manually view the current password content:
Temp.html
<!DOCTYPE html>
<html lang="en">
<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>用户登入</title>
<link rel="stylesheet" href="Temp.css">
</head>
<body>
<div>
<input id='text1' type="text" placeholder="用户名">
<input id='text2' type="password" placeholder="密码">
<!-- <button id="look">查看</button> -->
<img id='eye' src="pic/眼睛_隐藏_o.png" alt="不可见" onclick="">
</div>
<script src="Temp.js"></script>
</body>
</html>
Temp.css
/* 去掉密码框原有小眼睛 */
input[type="password"]::-ms-reveal{
display:none
}
/* 简单修饰输入框和眼睛图标 */
input {
display: inline-block;
}
#eye {
position: absolute;
margin-left: -20px;
margin-top: 3px;
height: 18px;
display: inline-block;
/* 便于定位 */
/* border: 1px solid; */
}
Temp.js
// 对输入框和眼睛图标进行事件配置
var look=document.getElementById('eye');
var password=document.getElementById('text2');
look.onclick=function(){
if(password.type=='password'){
look.src='pic/眼睛_显示_o.png';
password.type='text';
}else{
look.src='pic/眼睛_隐藏_o.png';
password.type='password';
}
}
The source of the small icon quoted: https://www.iconfont.cn/search/index?searchType=icon&q=%E7%9C%BC%E7%9D%9B
