网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

密码显示与隐藏效果

2021/6/11 13:06:19 人评论

前言: 一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~ 实现: 定义html的输入框的标签,kuang为底层盒子,password为输入框,conceal是那个小眼睛按钮&#xff…

前言:
一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~

实现:
定义html的输入框的标签,kuang为底层盒子,password为输入框,conceal是那个小眼睛按钮:

1 2 3 4 type=“password” 定义该字段中的字符被掩码。 placeholder=" 请输入密码…" 提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

定义kuang的基本样式,长,宽,阴影等等:
.kuang{
position: relative;
width: 380px;
height: 60px;
border-radius: 5px;
box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5),
inset -5px -5px 8px rgba(204, 197, 197,.5);
}
1
2
3
4
5
6
7
8
定义input输入框的基本样式:
.kuang input{
position: absolute;
top: 0;
left: 20px;
height: 100%;
width: 300px;
font-size: 18px;
outline: none;
border: none;
background-color:transparent;
}
.kuang input::placeholder{
color: rgba(68, 67, 67,.8);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
background-color:transparent;背景色为透明;
::placeholder 其作用可以改变input输入框里的文本颜色,大小,是否倾斜等等…详细用法

眼睛按钮的样式,一开始是闭眼的图片:
.conceal{
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background-image: url(mima/xianshi.png);
background-size: 100% 100%;
cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
js实现,点击小眼睛按钮时进行判断,通过改变type属性的值为text或者password而实现字符是呈现显示还是隐藏状态,按钮通过新类的添加或者移除呈现眼睛状态的呈现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
setAttribute() 方法添加指定的属性,并为其赋指定的值。
classList属性:
add(class1, class2, …) 在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加;remove(class1, class2, …) 移除元素中一个或多个类名。

更换小眼睛的图片:
.conceal.yincang{
background-image: url(mima/yincang.png);
background-size: 100% 100%;
}
1
2
3
4
完整代码:

Document
———————————————— 版权声明:本文为CSDN博主「北极光之夜。」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:[https://blog.csdn.net/luo1831251387/article/details/112914339](https://blog.csdn.net/luo1831251387/article/details/112914339)

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?