如何用JS实现点击小眼睛图标来切换表单密码框的密码显示与隐藏？

本文共计723个文字，预计阅读时间需要3分钟。

在许多网站中，您经常会遇到需要点击表格中的小眼睛图标来显示隐藏密码的功能。今天，小编就给大家分享一个实现这个功能的思路及代码。

准备：

1.两张PNG图片：一张为小眼睛图标（点击前），另一张为小眼睛图标（点击后）。

实现思路：

1.使用HTML和CSS创建一个表格，其中包含一个用于显示密码的文本框和一个隐藏密码的按钮。

2.使用JavaScript添加点击事件，当按钮被点击时，切换显示密码的文本框的type属性，从而实现密码的显示和隐藏。

代码示例：

密码显示/隐藏示例 .password-container { position: relative; display: inline-block; } .password-icon { cursor: pointer; position: absolute; right: 10px; top: 10px; }

密码：

请将上述代码保存为HTML文件，并替换`eye.png`和`eye-open.png`为您自己的图片路径。这样，您就可以实现点击小眼睛图标来显示和隐藏密码的功能了。

领导交个一个任务，要求在表单中点击小眼睛显示隐藏密码框中的密码！在一些网站中经常会用到这样的功能，今天小编就给大家分享我的实现思路及代码

准备：

1.两张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>

主体部分

<div> 密码 </div> <div> <input type="password"> <!--默认闭眼图--> <label><img src="1.png" alt="" id="eyes"></label> </div>

js部分

<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>

总结

到此这篇关于JS实现表单中点击小眼睛显示隐藏密码框中的密码的文章就介绍到这了,更多相关js 密码框点击小眼睛显示隐藏密码内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！