密码显示与隐藏效果 html+css+js

先看效果：

前言：

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

实现：

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

   <div class="kuang"><input type="password" placeholder=" 请输入密码......" id='password' > <div class="conceal" id='conceal'></div></div>

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);}

定义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);}

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;}

js实现,点击小眼睛按钮时进行判断,通过改变type属性的值为text或者password而实现字符是呈现显示还是隐藏状态,按钮通过新类的添加或者移除呈现眼睛状态的呈现:

<script>var password = document.getElementById('password');var anniu = document.getElementById('conceal');anniu.addEventListener('click',function(){if(password.type==='password'){password.setAttribute('type','text');anniu.classList.add('yincang');}else{password.setAttribute('type','password');anniu.classList.remove('yincang');}})</script>

setAttribute() 方法添加指定的属性，并为其赋指定的值。
classList属性：
add(class1, class2, …) 在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加；remove(class1, class2, …) 移除元素中一个或多个类名。

更换小眼睛的图片:

 .conceal.yincang{background-image: url(mima/yincang.png);background-size: 100% 100%; }

完整代码:

<!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>*{margin: 0;padding: 0;box-sizing: border-box;}body{height: 100vh;display: flex;align-items: center;justify-content: center;}.kuang{position: relative;width: 380px;height: 60px;border-radius: 5px;/*  background-color: rgba(204, 197, 197,.5); */box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5),inset -5px -5px 8px rgba(204, 197, 197,.5);}.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);}.conceal{position: absolute;top: 15px;right: 15px;width: 30px;height: 30px;background-image: url(mima/xianshi.png);background-size: 100% 100%;   cursor: pointer;}.conceal.yincang{background-image: url(mima/yincang.png);background-size: 100% 100%; }</style>
</head>
<body><div class="kuang"><input type="password" placeholder=" 请输入密码......" id='password' > <div class="conceal" id='conceal'></div></div><script>var password = document.getElementById('password');var anniu = document.getElementById('conceal');anniu.addEventListener('click',function(){if(password.type==='password'){password.setAttribute('type','text');anniu.classList.add('yincang');}else{password.setAttribute('type','password');anniu.classList.remove('yincang');}})</script>
</body>
</html>

总结:

我发现听些愉悦的音乐心情会好上许多~
就比如此刻的我~
听着音乐，写着文章~
生活或许挺好~

密码显示与隐藏效果 html+css+js相关推荐

html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...
不知道大家注意到没有,很多人性话的网站再输入密码的时候,如果开启大写锁定下过(切换键A左边的Cap Lock按键),那么就会给出一个提示,因为很多时候密码验证是区分大小写的,如果不小心开启或者关闭大小 ...
使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...
根据所学知识和查找网上资料所写,有错误或不足之处欢迎指正. 实现的效果如下图(网络图片)所示: 开始写代码注册html页面--先简单的利用table标签和input标签写出来(上面的图片用PS制作) ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
文字烟雾效果 html+css+js
先看效果(源码在最后): 网上看到了这个效果,觉得很有趣,所以也实现下,并不难,过程如下: 实现过程: 1.定义p标签: <p class="text"><一个青 ...
打字机效果 html+css+js
效果(最后有源码): 实现: 1. 定义标签,文本将写在span标签里,文本先在js的数组存着: <h1><span class="text" ></ ...
jQuery动画的显示与隐藏效果
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
jQuery动画的显示与隐藏效果！
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示 ...

密码显示与隐藏效果 html+css+js

先看效果：

前言：

实现：

完整代码:

总结:

密码显示与隐藏效果 html+css+js相关推荐

最新文章

热门文章