本文介绍如何使用JavaScript实现表单中点击小眼睛图标切换密码显示与隐藏的功能。通过获取输入框和图标元素，利用type属性在text和password间切换，并配合图片资源实现视觉交互，提供完整的HTML、CSS及JS代码示例。
功能概述与准备
近期接到一项开发任务，需要在表单交互中实现点击小眼睛图标来显示或隐藏密码框内的内容。此类功能在各类网站登录注册场景中十分常见，下面将详细分享具体的实现思路与完整代码。
准备工作：
需要两张PNG格式的图片资源，分别代表睁眼和闭眼状态。这些素材可以在阿里巴巴矢量图库等渠道免费下载获取。
界面布局与样式
最终效果展示
CSS样式部分可根据个人喜好进行定制，此处没有严格的规范要求。
<style>
div:first-child {
width: 300px;
height: 50px;
background-color: red;
color: white;
margin: 20px auto;
text-align: center;
line-height: 50px;
}
div:nth-child(2) {
position: relative;
width: 300px;
height: 50px;
margin: 100px auto;
}
input {
width: 300px;
height: 46px;
border: 0px white;
border-bottom: 1px solid black;
outline: none;
}
#eyes {
width: 18px;
position: absolute;
top: 27px;
right: 2px;
}
</style>
HTML结构实现
HTML主体结构部分
<div>
密码
</div>
<div>
<input type="password">
<!--默认闭眼图-->
<label><img src="1.png" alt="" id="eyes"></label>
</div>
JavaScript交互逻辑
JavaScript逻辑部分
<script>
//获取元素（两种方式都可以）
var input = document.querySelector('input')
var imgs = document.getElementById('eyes');
//下面是一个判断每次点击的效果
var flag = 0;
imgs.onclick = function () {
if (flag == 0) {
input.type = 'text';
eyes.src = '2.png';//睁眼图
flag = 1;
} else {
input.type = 'password';
eyes.src = '1.png';//闭眼图
flag = 0;
}
}
</script>总结
总结
至此，关于利用JavaScript实现表单中点击小眼睛图标来显示或隐藏密码框内容的教程介绍完毕。如需了解更多相关js 密码框点击小眼睛显示隐藏密码的内容，请搜索本站历史文章或继续浏览下方的相关文章，希望大家以后多多支持本站！