<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
width: 400px;
border-bottom: 1px solid black;
margin: 0 auto;
}
#pwd {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
#eye {
position: absolute;
width: 30px;
height: 30px;
top: 0px;
right: 2px;
}
</style>
</head>
<body>
<div id="box">
<label for="">
<img src="xyj.jpg" alt="" id="eye">
</label>
<input type="password" name="" id="pwd" />
</div>
<script>
// 密码显示隐藏
var input = document.getElementById("input");
var eye = document.getElementById("eye");
eye.onclick = function () {
if (pwd.type == "password") {
pwd.type = "text";
eye.src = "小眼睛.jpg"
} else {
pwd.type = "password";
eye.src = "xyj.jpg"
}
// pwd.type = "text";
}
</script>
</body>
</html>
密码的显示与隐藏
最新推荐文章于 2021-08-30 14:44:57 发布