仿京东显示隐藏密码明文案例（字体图标实现）

最新推荐文章于 2022-04-27 14:20:40 发布
最新推荐文章于 2022-04-27 14:20:40 发布
阅读量406 收藏 1
点赞数 1
分类专栏： JavaScript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45308912/article/details/121219999
版权
该博客介绍了一个使用字体图标库实现京东风格的显示/隐藏密码功能的案例。通过点击眼睛图标，可以切换密码输入框的类型，显示或隐藏明文密码。示例代码包括HTML、CSS和JavaScript，详细展示了如何布局、设置样式以及添加事件监听来切换图标状态。
摘要由CSDN通过智能技术生成

仿京东显示隐藏密码明文案例（字体图标实现）

眼睛使用的是 iconfont 阿里矢量图标库的内容
链接：https://www.iconfont.cn/search/index?在这里插入图片描述代码案例展示：
字体图标请查看其他博客自学

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="fontss/iconfont.css" />
		<style>
			#container {
				/* background-color: red; */
				width: 400px;
				height: 48px;
				margin: 100px auto;
				position: relative;
			}
			#pwd {
				width: 400px;
				height: 24px;
				outline: none;
				border: 0px;
				border-bottom: 1px solid lightgray;
			}
			span {
				position: absolute;
				left: 390px;
				top:10px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<lebel for="">
				<span class="iconfont icon-yanjing_xianshi_o" id="eye"></span>
			</lebel>
			<input type="password" id="pwd">
		</div>
		<script>
			var eye = document.querySelector('#eye');
			var pwd = document.querySelector('#pwd');
			var flag = 0; //用来做标记，0表示密码框 1表示文本框
			eye.onclick = function() {
				if (flag == 0) {
					pwd.type="text";
					eye.className="iconfont icon-yanjing_yincang_o";
					flag = 1;
				} else {
					pwd.type="password";
					eye.className="iconfont icon-yanjing_xianshi_o";
					flag = 0;
				}
			}
		</script>
	</body>
</html>

显示效果如下：在这里插入图片描述

积沙成塔——
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Dom——仿京东显示密码
zx2014567296的博客
06-10 700
显示密码 效果 整体样式如上图所示。密码框输入密码时是密文状态，（如下图1）当点击右边的闭眼图标，闭眼图标会变为睁眼图标，密码也会变为明文状态。（如下图2） 核心思路 在点击图标时密码框显示隐藏密码，因此需要获取的事件源为图标和密码框；事件类型为点击眼睛图标onclick；点击后if语句判断密码表单的类型，如果是类型type为password则转变为文本text，图标变为睁眼；如果是类型type为text则转变为文本password，图标变为闭眼。 HTML与CSS布局 <div cla
仿京东显示隐藏密码明文
m_0_1_0_1的博客
03-25 296
分析：点击按钮将密码框切换为文本框，并可以查看密码明文。一个按钮有两个状态，点击一次切换文本框，在点击一次切换密码框。 小算法技巧（适用于）：利用一个flag变量（一正一反），通过判断flag的值来进行不同的操作，并且每次执行最后需要把另一种情况的值赋值给flag，便于反复的执行。 思路：首先写出静态页面，然后写js。js的第一步是获取事件源，第二步是注册事件，第三步是添加事件的处理程序。（注：在标签较多的情况下，为标签写上id名便于区分） <!DOCTYPE html> <h
使用最简单的方式写出仿京东商城显示密码和隐藏密码效果
hmxs_hmbb的博客
03-11 592
使用最简单的方式写出仿京东商城显示密码和隐藏密码效果
仿京东显示隐藏密码
leechoy
06-12 1260
素材 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title.
仿京东的密码显示与隐藏
白白的博客
03-10 928
点击眼睛按钮，把密码框类型改为文本框，看见密码 获取元素（按钮） 注册单击事件 使用一个全局变量flag，记录type的状态 根据flag的值，改变type和src <body> <style> .box{ position: relative; width: 400px; border-bottom: 1px sol...
javascript实现京东登录显示隐藏密码
01-19
本文实例为大家分享了javascript仿京东登录显示隐藏密码的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
JS实现密码框的显示密码和隐藏密码功能示例
10-20
在网页开发中，用户输入密码的安全性...总之，JavaScript可以方便地实现密码框的显示和隐藏功能，但应结合安全实践，确保用户的密码得到妥善保护。开发者还应关注新的HTML特性，以便在不牺牲用户体验的同时提升安全性。
js实现密码隐藏及显示
08-11
最后，引入Bootstrap-show-password.js插件，并使用JavaScript将它们绑定在一起，实现密码显示隐藏的功能： ```javascript document.addEventListener('DOMContentLoaded', function() { var input = document....
javasript实现密码的隐藏与显示
09-03
如上面的代码所示，我们可以编写两个JavaScript函数，`ps()` 和 `txt()`，来切换密码框的类型，从而实现隐藏与显示密码的功能。 1. `ps()` 函数：当用户点击“显示密码”链接时，此函数会被调用。它首先检查当前...
JS仿京东显示密码
每天一个前端小知识~
08-21 1726
问题： 点击眼睛按钮将密码框转换为文本框，可以看见里面的密码 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿京东显示隐藏密码</title> <style type="text/css"> .box{ position: relative; width: 400px; border-bottom:
京东app图标
07-19
仿京东app时需要用到的一些图标
js点击密码显示
08-20
点击显示密码，密码框内容显示
12-仿京东显示隐藏密码.html
11-13
12-仿京东显示隐藏密码.html
JavaScript-81.11-仿京东显示密码
hzh2647650746的博客
04-27 1082
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie = edge"> </ti...
JavaScript 仿京东显示隐藏密码
qq_49900295的博客
03-04 1552
我们想要仿照京东登陆页面做一个密码框： 这个密码框部分右侧有一个闭着的小眼睛，此时默认密码框输入的密码是看不见的 当我们单击这个闭着眼睛的小图标时，图标变成了睁着的眼睛，并且输入的密码也可见了，如下所示： 那么下面附上这个小案例的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）
ddx2019的博客
07-02 9924
<template> <div id="login"> <el-form ref="numberValidateForm" :model="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="username" > <el-input
仿京东显示隐藏密码（52）
weixin_45147894的博客
07-05 2014
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti...
js仿京东显示密码案例
qq_44716920的博客
04-18 342
**描述：**点击按钮将密码框切换为文本框，并可以查看密码明文。 ```java  ````
仿京东显示隐藏密码明文学习(javascript)
qq_51813155的博客
10-16 341
仿京东显示隐藏密码明文学习要熟悉input type类型 思考: 做一个点击按钮，显示文本，再点击隐藏文本, 以小点为隐藏 输入框，按钮 输入框：操作 要熟悉input type类型 Inpurt操作:知识点 <input type="password"> type=“password” 输入时,隐藏文本，密码形式，以小圆点代替输入的文本 <input type="text"> 输入时,显示文本内容 js实现算法 : 一点击如果：当flag=0，显示文本，然后flag+1，再
vue中element-ui密码显示与隐藏图标变化
最新发布
08-08
在Vue中使用element-ui来实现密码显示与隐藏图标变化可以通过以下步骤实现。 首先，在Vue组件内引入element-ui库，并在相关页面中引入所需的组件。比如使用`el-input`组件来实现输入框，使用`el-icon`组件来显示图标。 接下来，在data中定义一个`passwordVisible`变量，默认值为false，用来控制密码框中的图标显示。同时，设定一个初始密码的值。 然后，在模板中使用`el-input`组件来创建一个密码输入框，通过`v-model`指令绑定一个名为`password`的data属性，用于保存输入的密码。 在密码输入框的右侧，使用`el-icon`组件来显示图标，通过`v-show`指令控制图标的显示与隐藏。当密码可见时，显示一个代表隐藏的图标，例如"el-icon-view"；当密码不可见时，显示一个代表显示的图标，例如"el-icon-view-show"。 接下来，为图标绑定一个点击事件，当点击图标时，修改`passwordVisible`变量的值。如果`passwordVisible`为false，则表示密码不可见，这时将其改为true；如果`passwordVisible`为true，则表示密码可见，这时将其改为false。 同时，通过`v-bind:class`指令给图标绑定一个class样式，根据`passwordVisible`的值来改变图标的样式。例如，当`passwordVisible`为false时，给图标加上一个加密的样式，表示密码不可见；当`passwordVisible`为true时，给图标加上一个解密的样式，表示密码可见。 最后，根据`passwordVisible`的值，通过`v-if`指令判断密码框中显示的内容。若`passwordVisible`为false，则显示密文密码，保护用户的隐私；若`passwordVisible`为true，则显示明文密码，方便用户查看。 通过以上的步骤，就可以实现在Vue中使用element-ui来实现密码显示与隐藏图标变化的效果。用户点击图标，可以方便地切换密码的可见与隐藏状态。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值