HTML密码框添加⼩眼睛和x按钮。
**此篇⽂章为个⼈原创，欢迎参考学习**
//本⽂主要讲解密码框添加⼩眼睛例⼦和账号输⼊框添加X图⽚做清除功能。
//实现这个功能很容易，或许你们有其它⽅法实现，欢迎来交流！
//我先来说说我的思路。
先把结构打出来；
<div class="big">
<span class="span_tp"id="zhanghao" >账号：</span>
<input class="input_tp" data-role = "none"id="tel" value="" type="text"name="tel1" placeholder="请输⼊
⼿机号码："/>
<a id="delete"class="tubiao" title="清除" ><img src="../img/delete-black.png"/></a>
<br />
<span class="span_tp"id="mima">密码：</span>
<input class="input_tp" data-role = "none"id="pass" value="" type="password"name="pass1" placeholder="请输⼊密码："/>
<a id="dj"class="tubiao" title="点击隐藏或显⽰密码"><img src="../img/eye-black.png"/></a>
<br />
</div>
然后，定义div并且⽤text-align:center设置⾥⾯的内容居中显⽰。
input输⼊框设置：input输⼊框设置宽度width 80%，⾼height：30px，⽤padding定 义input⾥⾯的左内距和右内距，这个可以根据⾃⼰的需求调整。
span⽂字设置：position：absolute设置标签绝对定位，right边距离12%，其它属性⽤来调整位置的，就不详细介绍了。
a 标签设置：主要是对a标签⾥⾯的设置。注意这个也是定义绝对定位，opactity来设置透明度，⿏标悬停时改变透明度，视觉感更好。 图⽚可根据⾃⼰的喜号下载，加⼊即可。
<style>
.big{text-align: center;    }
.input_tp{width: 80%;height: 30px;border-radius: 10px;padding-left: 48px; padding-right: 30px;}
jquery框架定义.span_tp{position: absolute;margin-top: 5px;margin-left: 5px;}
.tubiao{width: 30px;  height: 25px; position: absolute;    right: 12%; padding-top: 8px;opacity: 0.5;}
.tubiao:hover{opacity: 1;}
</style>
//样式做完了就可以添加响应效果了，我引⽤的是jQuery框架。
<script type="text/javascript">
$(document).ready(function(){
$("#delete").click(function(){
$("#tel").val(""); //点击图标后响应，清空输⼊框数据
});
$("#dj").click(function(){
//点击眼睛，如果input输⼊框为为text时执⾏，并改成password实现隐藏。
if($("#pass").attr("type")=="text"){
$("#pass").attr("type","password");
$("#dj img").css("opacity",0.5)
}
/
/点击眼睛，如果input输⼊框为为password时执⾏，并改成text实现隐藏。
else{
$("#pass").attr("type","text");
$("#dj img").css("opacity",1)
}
});
});
</script>
//下⾯列出全部代码，可参考。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript"src="../js/jquery-1.12.4.min.js" ></script>
<style>
.big{text-align: center;    }
.input_tp{width: 80%;height: 30px;border-radius: 10px;padding-left: 48px; padding-right: 30px;}
.span_tp{position: absolute;margin-top: 5px;margin-left: 5px;}
.tubiao{width: 30px;  height: 25px; position: absolute;    right: 12%; padding-top: 8px;opacity: 0.5;}
.tubiao:hover{opacity: 1;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#delete").click(function(){
$("#tel").val("");
});
$("#dj").click(function(){
if($("#pass").attr("type")=="text"){
$("#pass").attr("type","password");
$("#dj img").css("opacity",0.5)
}
else{
$("#pass").attr("type","text");
$("#dj img").css("opacity",1)
}
});
});
</script>
</head>
<body>
<div class="big">
<span class="span_tp"id="zhanghao">账号：</span>
<input class="input_tp"data-role = "none" id="tel"value=""type="text"name="tel1"placeholder="请输⼊⼿机号码："/>
<a id="delete"class="tubiao"title="清除" ><img src="../img/delete-black.png"/></a>
<br />
<span id="tel_error"class="error"></span><br />
<span class="span_tp"id="mima">密码：</span>
<input class="input_tp"data-role = "none" id="pass"value=""type="password"name="pass1"placeholder="请输⼊密码："/>
<a id="dj"class="tubiao"title="点击隐藏或显⽰密码"><img src="../img/eye-black.png"/></a>
<br />
</div>
</body>
</html>
//样式，位置js这些可以根据个⼈喜好进⾏调整。还有就是X和眼睛的图标需要⾃⼰去下载，或者换成其它图标也⾏。
//废话多了点，如果你有更好的⽅法，欢迎指点，交流。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。