JS实现密码框小眼睛的显示与隐藏(使用字体图标)

最新推荐文章于 2024-05-07 07:53:49 发布
最新推荐文章于 2024-05-07 07:53:49 发布
阅读量1.2w 收藏 26
点赞数 9
文章标签： javascript css html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43681578/article/details/108904224
版权

JS实现密码框小眼睛的显示与隐藏(使用字体图标)

前端学习路上的小练习，如若不喜，请勿喷。
眼睛使用的是 iconfont 阿里矢量图标库的内容
链接：https://www.iconfont.cn/search/index?searchType=icon&q=%E7%9C%BC%E7%9D%9B&page=2
在这里插入图片描述

代码实现

字体图标的引用，麻烦自学我就不多概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../.././font/font_2099015_z5uhbhlgbqn/iconfont.css">
    <style>
        .box {
            position: relative;
            width: 300px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;

        }
        .box input {
            width: 230px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box span {
            position: absolute;
            top: 6px;
            right: 1px;
            width: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <lable for="">
        <span class="iconfont icon-yanjing-bi" name="eye" id="eye"></span>
    </lable>
    <input type="password" name="pwd" id="pwd">
</div>
<script>

    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');
    var flag=0;    // 设置变量记录变换状态 1 为文本框   0 为密码框
    eye.onclick = function() {
        if(flag==0) {
            pwd.type = 'text';
            eye.className = 'iconfont icon-yanjing';    // className 引用字体图标  *关键
            flag=1;
        }
        else {
            pwd.type = 'password';
            eye.className = 'iconfont icon-yanjing-bi';
            flag=0;
        }
    }

</script>
</body>
</html>

刚开始学习前端，小菜鸟，希望能帮到大家。

他不是文青
关注
  • 9
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ie浏览器自带小眼睛是什么用的_如何取消禁用IE10密码输入框中的小眼睛功能
weixin_32921593的博客
12-24 1102
在升级到Windows 8之后，就发现在应用中登入账户以及使用IE10浏览器(桌面版及Metro/Modern版)时，输入密码后，会在密码输入框右侧有一个小眼睛一样的“可视”按钮，点击后可以暂时明文显示密码。这样的设置，对于复杂或不熟悉的密码确实很是实用。但是当密码很简单且不需要任何提示的时，却又多了一些安全隐患，是否可以关闭这个功能呢？解决方法步骤：方法一经过一番查找，最后在组策略中找到了这个选...
自定义input密码框眼睛显示隐藏（vue3+ts）
m0_69688393的博客
12-09 1913
自定义input密码框眼睛显示隐藏（vue3+ts）
JS实现表单中点击小眼睛显示隐藏密码框中的密码
10-15
主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
html--眼睛
最新发布
stqer的博客
05-07 1071
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords
js实现密码输入框点击小眼睛显示或隐藏密码
努力变好
10-17 5664
登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去。（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）
react 通过小眼睛 控制密码显示与隐藏
04-11
因为项目需要有个小功能，控制小眼睛睁眼闭眼实现密码的可读还是隐藏。亲身使用总结，有问题可以随时联系我。
实现密码输入框小眼睛的功能
热门推荐
小学生的博客
09-06 2万+
最近上课说了前端HTML和javascript，以前只是初略学习，现在需要做一个小项目，每个人写些页面，因为对前端不太了解，写起来很吃力啊。但是一点一点学习。 用的是bootstrap框架。做一个登陆页面，要实现输入框点击小眼睛可以看见密码明文。 如图，HTML代码是： 四方考试系统 用户登录
JS实现密码框的显示密码和隐藏密码功能示例
10-20
在网页开发中，用户输入密码的安全性...总之，JavaScript可以方便地实现密码框的显示和隐藏功能，但应结合安全实践，确保用户的密码得到妥善保护。开发者还应关注新的HTML特性，以便在不牺牲用户体验的同时提升安全性。
jquery 实现密码框的显示与隐藏示例代码
10-26
本文将详细介绍如何使用jQuery库来实现密码框的显示与隐藏功能。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画等任务。在这个示例中，我们使用jQuery来监听复选框（`...
input输入款点击小眼睛显示或隐藏密码
04-19
前端登录界面输入密码，input输入款点击小眼睛显示或隐藏密码。
密码输入框，实现通过点击眼睛图标使密码可见或隐藏的效果
qq_43625014的博客
09-10 4569
js //Change the password display state by clicking ico. changePasswordDisplayState = function(){ if ($inputpw.attr("type") == "password") { $inputpw.get(0).setAttribute("type", "text"); ...
js点击小眼睛显示隐藏密码框的密码
爬楼梯的前端小白的博客
09-05 2658
使用js实现密码框里的密码显示与隐藏，点击小眼睛可随时切换
android密码小眼睛,android 实现点击edittext的“小眼睛”切换明密文
weixin_39548193的博客
05-31 1156
很多时候，我们为了用户的隐私安全，需要在密码输入的时候，显示密文。为了更好的用户体验，我们给用户提供了可以切换明密文的小图标(小眼睛)先来看一下效果图：这里我们可以有两种实现方式：一、布局文件：android:layout_width="match_parent"android:layout_height="wrap_content">android:id="@+id/editText"an...
js实现密码框小眼睛的显示与隐藏
光头强的博客
02-11 1万+
眼睛的实现需要借助fontawesome里面的小图标：http://fontawesome.dashgame.com/ 引入font-awesome文件： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt..
#vue# mousedown、mouseup事件，JS实现密码框小眼睛显示与隐藏
ZHENGCHUNJUN的博客
07-23 2349
需求： 密码框右侧小眼睛， 鼠标按下鼠标按键（左、右键均可）就显示出密码， 鼠标松开鼠标按键（左、右键均可）密码就隐藏 思路： （1）首先就是排版了（不细讲） 提供右侧小眼睛的一种做法： 把输入框和小眼睛放在一个大的div里面， 然后在div里面设置相对定位，在小眼睛里面设置绝对定位（子绝父相）， 然后right=40%左右，padding-top= 实际尺寸，就可以达到小眼睛在输入框的右侧显示 .signin-item { //父盒子 position: relative..
用小眼睛图标控制手机号脱敏显示
liubangbo的专栏
11-11 1537
用的是vue框架，以及ant design vue 组件库，代码如下： <template> <a-form :form="form"> <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="手机号" > <a-input disabled v-mode
输入框怎么才会长“眼睛”？——显示密码与隐藏密码
microlv1996的博客
08-25 1万+
会长“眼睛”的input输入框： 注：本文所需图片或者文件都在文章末尾处 我们在登入账户，进入登入页面中。在密码框，我们会遇到旁边有一个像眼睛的图标。只要点击了它，密码会显示会隐藏（如下图显示），这到底是什么“绝技”？待小编慢慢道来。 我们知道，html页面中input标签，我们可以设置type属性。type为text代表着填写的是文本（显示文字），type为pasword代表着填写的是密码（隐藏文字），点击”闭眼”图标可以设置type为password，点击”睁眼”图标可以设置type为text
实现密码框小眼睛效果
沐小侠
01-16 5770
点击眼睛显示密码,再次点击图标隐藏密码，需要变化的图标样式和input的显示方式。
javascript实现“密码显示与隐藏”
05-27
你可以通过以下代码实现密码显示与隐藏的效果： HTML代码： ``` <label for="password">密码：</label> <input type="password" id="password" /> <button id="toggle">显示</button> ``` JS代码： ``` const passwordInput = document.getElementById("password"); const toggleButton = document.getElementById("toggle"); toggleButton.addEventListener("click", function() { if (passwordInput.type === "password") { passwordInput.type = "text"; toggleButton.textContent = "隐藏"; } else { passwordInput.type = "password"; toggleButton.textContent = "显示"; } }); ``` 这段代码中，我们首先获取到了密码输入框和切换按钮的DOM元素，然后给切换按钮添加了一个“点击”事件监听器。在事件处理函数中，我们判断当前密码输入框的type属性是否为“password”，如果是，就将其改为“text”，同时将切换按钮的文本内容改为“隐藏”；否则，将密码输入框的type属性改为“password”，同时将切换按钮的文本内容改为“显示”。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值