基于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的图片的切换(以数字的形式)
Feb 14 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
JS倒计时代码汇总
Nov 25 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Python模拟登录12306的方法
2014/12/30 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python进行统计建模
2020/08/10 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
Java程序员面试题
2013/07/15 面试题
晚归检讨书
2014/02/19 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
认真学习保证书
2015/02/26 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
安全教育培训心得体会
2016/01/15 职场文书
七年级语文教学反思
2016/03/03 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL