js实现input密码框显示/隐藏功能


Posted in Javascript onSeptember 10, 2020

JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下

js实现input密码框显示/隐藏功能

实现代码:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
 .password{
 position: relative;
 width: 280px;
 height: 60px;
 }
 .password,.n-txtCss{
 display: flex;
 align-items: center;
 }
 .password .fa{
 position: absolute;
 right: 10px;
 top:15px;
 font-size: 20px;
 cursor: pointer;
 }

 .fa-eye-slash{
 margin-top: 6px;
 margin-left: 7px;
 width: 24px;
 height: 20px;
 background-image: url(./vivo_img/login/eye-password.png);
 background-repeat: no-repeat;
 background-size: 24px 17px;
 }
 .fa-eye{
 margin-top: 6px;
 width: 24px;
 margin-left: 7px;
 height: 20px;
 background-image: url(./vivo_img/login/eye-password-active.png);
 background-repeat: no-repeat;
 background-size: 24px 17px;

 }

 </style>
 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

</head>
<body>
 <dd class="password">
 <input type="password" name="" placeholder="设置密码:8-16位字母和数字" maxlength="16" style="outline: none;width: 240px;">
 <i class="fa fa-eye-slash"></i>
 </dd>
<script type="text/javascript">
 $(".password").on("click", ".fa-eye-slash", function () {
 $(this).removeClass("fa-eye-slash").addClass("fa-eye");
 $(this).prev().attr("type", "text");
 });
 
 $(".password").on("click", ".fa-eye", function () {
 $(this).removeClass("fa-eye").addClass("fa-eye-slash");
 $(this).prev().attr("type", "password");
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Vue slot用法(小结)
Oct 22 #Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 #Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 #Javascript
vue-cli项目中使用echarts图表实例
Oct 22 #Javascript
vue使用echarts图表的详细方法
Oct 22 #Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
You might like
用PHP实现递归循环每一个目录
2010/08/08 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
神路信息Java面试题目
2013/03/31 面试题
数据库方面面试题
2012/04/22 面试题
2014年大学生自我评价
2014/01/19 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2016年父亲节寄语
2015/12/04 职场文书
《颐和园》教学反思
2016/02/19 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js