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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
Node.js实现数据推送
Apr 14 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
原生js+ajax分页组件
Jan 30 Javascript
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结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
node.js中的require使用详解
2014/12/15 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
学校经典推荐信
2013/10/30 职场文书
三年级语文教学反思
2014/02/01 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
pandas中关于apply+lambda的应用
2022/02/28 Python
vue封装数字翻牌器
2022/04/20 Vue.js