JS实现密码框的显示密码和隐藏密码简单功能

最新推荐文章于 2024-04-08 21:28:38 发布
最新推荐文章于 2024-04-08 21:28:38 发布
阅读量6.6k 收藏 12
点赞数 5
分类专栏： Web 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45090657/article/details/121760525
版权

1.准备素材
打开网页：https://www.iconfont.cn/ 阿里巴巴矢量库

在这里插入图片描述
在这里插入图片描述
找到两个素材，下载即可

2.代码部分

<style>
    .box {
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
    }

    .box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }

    .box img {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 24px;
    }
</style>

<body>
    <div class="box">
        <input type="password" id="input">
        <img src="../img/close.png" id="eye">
    </div>

    <script>
        // 1.获取元素
        var input = document.getElementById('input');
        var eye = document.getElementById('eye');
        var flag = 0;
        // 2.注册事件 处理程序
        eye.onclick = function () {
        	// 应用flag 可以实现循环点击
            if (flag === 0) {
                // 点击一次后 flag 一定要变化
                input.type = 'password';
                // 修改 -图片路径
                eye.src = "../img/close.png";
                flag = 1;//赋值操作
            } else{
                input.type = 'text';
                // 修改 -图片路径
                eye.src = "../img/open.png";
                flag = 0;
            }

        }
    </script>

3.效果
在这里插入图片描述

bearWeb
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
JS实现表单中点击小眼睛显示隐藏密码框中的密码
10-15
主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
js案例（密码的显示与隐藏）
最新发布
2303_76379956的博客
04-08 218
利用onclick（事件绑定）当点击按钮时，密码框的type属性变成password属性。s。
## 前端登录页面 用户名和密码设置
weixin_44911430的博客
05-18 4377
前端登录页面 用户名和密码设置 1.用户名默认显示用户名，失去焦点则为空，失去焦点判断若空则默认用户名，有值则有值。 2.密码设置默认值方法：建立一个password 再建立另外一个text的pwd，然后onload的时候显示text的pwd,在text的pwd焦点上时，password显示，text的pwd隐藏，然后点击password触发点击事件（password获得焦点）,然后给password做判断，失去焦点则显示text的pwd,password隐藏，有值则有值。 $(document).read
前端显示隐藏密码案例
weixin_46002223的博客
08-23 1121
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { .
javascript密码可见 -- 案例
Messchao的博客
09-29 275
js点击密码可见 @Draven效果预览html代码css代码js代码 效果预览 html代码 <input type="text" placeholder="账号"> <input type="password" placeholder="密码"> <button>点击显示密码</button> css代码 无 js代码 <script> //获取密码框 var pas = document.querySelectorAll('inp
JavaScript实现登录密码的显示和隐藏
m0_48639378的博客
06-29 4219
JavaScript实现登录密码的显示和隐藏
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
m0_62709532的博客
03-31 6194
【代码】input如何显示密码隐藏密码，点击小眼睛显示隐藏密码。
Vue——密码框显示和隐藏密码功能
weixin_43551242的博客
12-20 4254
方法一：使用element直接可以用的，密码显示隐藏功能 <el-input placeholder="请输入密码" v-model="input" show-password></el-input> <script> export default { data() { return { input: '' } } } </script> 方法2、 <el-form-item l..
AngularJs实现密码框的内容校验
xy8199的博客
10-24 1236
用AngularJs实现下图效果。 要求：实现密码框的内容校验，并实现下拉列表的所列的展示形式。 具体看下图效果 1.页面初始效果 2.两次密码不一致时的效果 3.当显示方式修改为显示错误提示时，详细的内容错误提示 4.当显示方式为提交时才显示的效果 点击按钮后 源码： html> html ng-app="myApp"
前端密码加密
qq_59180014的博客
11-24 1597
隐藏真实密码，实现加密传输。
js实现input密码框显示/隐藏功能
10-17
主要为大家详细介绍了js实现input密码框显示和隐藏功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现登录页密码的显示和隐藏功能
10-18
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于JS实现登录页密码的显示和隐藏功能，需要的朋友参考下吧
JS实现密码的显示与隐藏（仿京东登录界面）
hannah2233的博客
07-18 1982
首先，上页面展示以及代码实现 其次，附上实现代码的相关知识点 首先 1. 页面展示 2. js的实现思路 点击眼睛，把密码框类型改为文本框就可以看见里面的密码 一个按钮两个状态，点击一次，切换为文本框，继续点击切换成密码框 算法： 利用一个flag变量，来判断flsg的值，如果是1就切换成文本框，flag设置为0；如果是0就切换成密码框，flg设置为1 3. 代码实现 html+css <div class="box"> <label for=""&gt..
前端js实现密码块的显示与隐藏（按钮）
EEEugene的博客
11-16 1548
最近老师上课有讲到这个问题，写了就顺便就发出来吧 js部分 <script type="text/javascript"> window.onload=function(){ var oPass= document.getElementById('pass'); var oBtn=document.getElementBy...
js 之 密码框 显示密码和隐藏密码
热门推荐
ETHAN IN IT
04-21 1万+
显示密码 function showps(){ if (this.forms.password.type="password") { document.getElementById("box").innerHTML=""; document.get
【前端】自制密码展示隐藏按钮
糯米w的博客
07-17 567
小组件实现密码框的隐藏和显示
JavaScript 实现密码可见性切换（显示和隐藏）
linxiaoduo的博客
12-28 5923
默认情况下，输入的密码的 input 标签 type="password"，默认密码用小点或星号表示。要密码可见所以我们需要将type修改为"text"。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type 属性轻松实现该效果，但是 IE 下就会报错。如果你需要兼容IE，就必须考虑其他方案。 这里有几点需要说明的是： 示例使用了替换整个 input 标签方案，所以...
JavaScript练习——密码框的显示与隐藏
m0_65290003的博客
11-23 1343
1、通过 document.querySelector，选取页面上的输入框元素（input）和标签元素（label）。2、为输入框元素添加两个事件监听器：一个用于处理获取焦点（focus）事件，另一个用于处理失去焦点（blur）事件。当输入框获取焦点时，为标签元素添加 active 类。当输入框失去焦点，并且输入框内没有内容时，移除标签元素的 active 类。3、为密码图标（.mi-password）添加一个点击事件监听器，用于处理点击事件。当密码图标被点击时，检查输入框的类型。
实现input密码框显示/隐藏的功能
05-30
你可以使用HTML和JavaScript来实现input密码框的显示/隐藏功能。以下是一种实现方式： HTML代码： ```html 密码： 显示密码 ``` JavaScript代码： ```javascript const passwordInput = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值