js简单实现密码的显示与隐藏

最新推荐文章于 2025-10-02 12:55:55 发布
原创 最新推荐文章于 2025-10-02 12:55:55 发布 · 1w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #web前端 #js

本文介绍了一种使用JavaScript实现密码输入框显示与隐藏循环切换的方法。通过设置输入框的type属性来达到密码显示与隐藏的效果，并利用一个布尔变量辅助实现多次点击按钮后的状态切换。

使用js实现单击按钮时显示密码，再次单击时隐藏密码的循环切换功能。

源码：

1.通过getElementById获取到输入框的type和按钮。当按钮添加一个onclick事件，改变输入框的type值为text，使密码显示；再次点击时改变type值为password，使密码隐藏。

2.定义一个变量a并赋值为true，在第一次调用onclick事件后将其赋值为false，并通过 if 语句实现循环切换功能。

JS实现密码框的显示密码和隐藏密码功能示例
11-28
本文实例讲述了JS实现密码框的显示密码和隐藏密码功能。分享给大家供大家参考，具体如下： 运行效果图如下： 完整实例代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="" name="forms"> <input type="password" name="password" size="80" style="width
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
标题和描述中提到的知识点是关于如何使用Vue框架结合Element UI组件库来实现密码输入框的显示/隐藏功能以及配合的小图标变化功能。具体实现涉及到Vue的响应式数据绑定、事件处理和条件渲染等核心特性，同时利用...
密码的显示与隐藏（js）
ice_yr的博客
06-25 348
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; position: relative;
使用 HTML, CSS 和 JavaScript 实现密码显示/隐藏功能
最新发布
weixin_42107409的博客
10-02 1123
本教程详细介绍了如何在Web应用中实现密码输入框的显示/隐藏功能。通过HTML构建基础结构，CSS美化样式并定位图标，JavaScript添加交互逻辑，最终实现点击图标切换密码可见性的效果。项目包含完整的代码示例和解释，适合前端初学者巩固基础知识并理解DOM操作与事件处理。教程还提供了拓展改进建议和常见问题解答，帮助开发者进一步优化功能。
js案例（密码的显示与隐藏）
2303_76379956的博客
04-08 975
利用onclick（事件绑定）当点击按钮时，密码框的type属性变成password属性。s。
JavaScript练习——密码框的显示与隐藏
m0_65290003的博客
11-23 2443
1、通过 document.querySelector，选取页面上的输入框元素（input）和标签元素（label）。2、为输入框元素添加两个事件监听器：一个用于处理获取焦点（focus）事件，另一个用于处理失去焦点（blur）事件。当输入框获取焦点时，为标签元素添加 active 类。当输入框失去焦点，并且输入框内没有内容时，移除标签元素的 active 类。3、为密码图标（.mi-password）添加一个点击事件监听器，用于处理点击事件。当密码图标被点击时，检查输入框的类型。
利用JS实现密码的显示隐藏
渣渣的成长之路
02-17 2091
如图所示，想要实现下边的功能怎么办？其实很简单。。。 HTML代码如下（注意：需要给input和img各取一个id，并且在css中把样式定位好） <input type="password" class="form-control" id="oldpassword" placeholder="请输入旧密码"> <img src="../../img/showp...
原生js实现密码输入框值的显示隐藏
10-19
原生JavaScript实现密码输入框值的显示与隐藏是前端开发中常见的一个功能，用于提升用户体验，使用户能够清晰地看到自己输入的密码。这一功能的实现涉及到HTML表单元素的基本操作，JavaScript的事件监听与DOM操作，...
Vue基于iview实现登录密码的显示与隐藏功能
10-15
### Vue和iView实现密码显示与隐藏功能 1. **实现思路**：首先要判断当前密码是显示状态还是隐藏状态，然后通过点击事件切换这两种状态。 2. **判断当前密码显示状态**：使用Vue的条件渲染指令`v-if`和`v-else`来...
js显示和隐藏密码
csdnyq的博客
04-13 852
js显示和隐藏密码 <div class="col-8"> <span id="ori_pass_span"> <input class="form-control" id="passwd" type="password" size="13" /> </span> <input class="btn btn-primary" t...
js利用变量实现显示密码与隐藏密码
Z56umie的博客
03-26 993
按钮：btn 密码：psw 首先知道，点击一次按钮会使密码的类型转成文本类型，这个好实现，直接 btn.onclick = function () { psw.type = 'text'; } 但是如何再点一次按钮使它变回隐藏状态呢？ 思路：需要变回隐藏状态，那就需要知道它现在的状态是什么，现在是显示状态，那么可以通过if语句判断是否是显示状态，如果是，就写出点一次按钮变成隐藏状态的代码；如果是隐藏状态，就写出点一次按钮变成显示状态的代码 判断状态比较麻烦，所以我们可以把某个状
js实现input密码显示隐藏
07-13
密码显示隐藏
用js实现密码的显示和隐藏
新手上路的博客
11-18 6336
第一、首先准备两张眼睛的照片，例如下图（也可以去找自己喜欢的） 第二、Html样式： <div class="see"> <img src="~/Condent/img/openeye.png" id="openEye" style="display:none;" /> <img src="~/Condent/img/closeeye.png" alt="隐藏密码" id="closeEye" /> </div> 第三、js代码 //----
js实现密码的显示和隐藏
qq_52256892的博客
10-08 233
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 400px; border-bottom: 1px solid #FF0000; margin: 100px auto; position: relative;
JS实现密码框的显示密码和隐藏密码简单功能
weixin_45090657的博客
12-07 6960
1.准备素材 打开网页：https://www.iconfont.cn/ 阿里巴巴矢量库 找到两个素材，下载即可 2.代码部分 <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 37
2.用js实现显示和隐藏密码
yizhangzzzz的博客
10-05 329
css代码如下： <style> *{ margin: 0; padding: 0; } input{ border: none; outline: none; padding-bottom: 8px; } .box{ width: 300px; b
JavaScript实现登录密码的显示和隐藏
m0_48639378的博客
06-29 4516
JavaScript实现登录密码的显示和隐藏
js实现显示隐藏输入的密码
qq_34417247的博客
07-15 864
/ 2. 注册事件，处理程序。// 1. 获取元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值