点击眼睛显示密码,再次点击图标隐藏密码,需要变化的图标样式和input的显示方式。
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/iconfont.css" rel="stylesheet"/>
<style>
div{
width: 200px;
height: 30px;
line-height:30px;
border: 1px solid #000;
}
input{
border: none;
outline: none;
float: left;
}
span{
width: 30px;
height: 30px;
float: left;
}
</style>
</head>
<body>
<div>
<input type="password"/>
<span class="iconfont icon-yanjing_yincang" id="eye"></span>
</div>
<script src="js/jquery-3.6.1.js"></script>
<script>
$(function(){
$("#eye").click(function(){
//获取type属性
var type = $(this).prev().attr("type");
if(type==="password"){
//获取input标签并设置type属性为text
$(this).prev().attr("type","text");
}else{
//获取input标签并设置type属性为text
$(this).prev().attr("type","password");
}
//删除当前元素指定的类名,并设置指定的类
$(this).toggleClass("icon-yanjing_yincang")
.toggleClass("icon-yanjing_xianshi");
})
})
</script>
</body>
</html>