基于JavaScript实现表单密码的隐藏和显示出来


Posted in Javascript onMarch 02, 2016

为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢? 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果.

基于JavaScript实现表单密码的隐藏和显示出来 

界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称.

<div class="pass-box">
<input type="password" name="pass" />
<i state="off"></i>
</div>

现在我们给相应的class加入相应的属性值. 在这个box里, i 需要在input之上, 所以需要给 i 一个position属性, 然后调整其top和right. 然后给其设置宽度和高度,设置其背景图片.

.pass-box {
width: 300px;
margin: 30px auto;
position: relative;
}
.pass-box input {
border: #cccccc 1px solid;
background-color: #fff;
color: #666;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.pass-box i{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top:5px;
background-image: none;
background-size: 200% 200%;
background-position: center;
}

这样界面效果完成. 然后给 i 加入点击事件. 在HTML结构中, 我们给了 i 一个状态, 这个作用主要是用于用户两次点击效果的判断. 点击第一次, 密码显示; 点击第二次, 密码隐藏. 重复这样的动作. 所以利用这个state来查看其状态.

重点就在于, 修改input的type属性, 显示的时候type为 text, 隐藏的时候是 password. 所以JS的逻辑处理也是比较清晰.

var ele_pass_box = document.getElementsByTagName("div")[0];
var ele_pass = ele_pass_box.getElementsByTagName("input")[0];
var ele_eye = ele_pass_box.getElementsByTagName("i")[0];
ele_eye.onclick = function () {
var state = this.getAttribute("state");
if(state === "off") {
ele_pass.setAttribute("type", "text");
ele_eye.setAttribute("state", "on");
ele_eye.style.opacity = 0.2;
} else {
ele_pass.setAttribute("type", "password");
ele_eye.setAttribute("state", "off");
ele_eye.style.opacity = 1;
}
}

这就是逻辑代码, 代码量不多. 大家在测试的时候, 注意细节就好.

以上是小编给大家分享的基于JavaScript实现表单密码的隐藏和显示出来的全部内容,希望对大家有所帮助!

Javascript 相关文章推荐
jquery实现加载等待效果示例
Sep 25 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
给js文件传参数(详解)
Jul 13 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 #Javascript
js实现不重复导入的方法
Mar 02 #Javascript
基于JavaScript实现智能右键菜单
Mar 02 #Javascript
JS简单实现String转Date的方法
Mar 02 #Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 #Javascript
JS判断是否长按某一键的方法
Mar 02 #Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 #Javascript
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
php的正则处理函数总结分析
2008/06/20 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
javascript引用对象的方法代码
2007/08/13 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
js Dialog 实践分享
2012/10/22 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
js获取ip和地区
2017/03/10 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
python实现类的静态变量用法实例
2015/05/08 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
python 深度学习中的4种激活函数
2020/09/18 Python
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
会议室标语
2014/06/21 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
小学教师教学随笔
2015/08/14 职场文书
Python实现聚类K-means算法详解
2022/07/15 Python