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生产批量批处理执行命令
Jul 28 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
Angular实现表单验证功能
Nov 13 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue实现购物车列表
Jun 30 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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的access操作类
2008/04/09 PHP
php木马webshell扫描器代码
2012/01/25 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
Gird事件机制初级读本
2007/03/10 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python基础教程之Hello World!
2014/08/29 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python 调用HBase的简单实例
2016/12/18 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
学前教育专业毕业生自荐信
2013/10/03 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
《将心比心》教学反思
2016/02/23 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书