输入密码框内的哪个小眼睛怎么实现的啊？
输入密码框内的哪个小眼睛怎么实现的啊？
qq_慕慕3093659
2021-04-09
3 回答
我们可以利用Font Awesome一套绝佳的图标字体库和CSS框架
下面是我的代码，你可以看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<form method="post" action="test2.html">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<i class="fa fa-eye" onclick="showhide()" id="eye"></i>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
<script type="text/javascript">
var a=document.getElementById("eye");
var b=document.getElementById("pass");
function showhide(){
if(b.type=="password"){
b.type='text';
a.className='fa fa-eye-slash'
}else{
b.type='password';
a.className='fa fa-eye'
}
}
</script>
</html>
举报
0/150
提交
取消
