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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
jQuery 性能优化指南(3)
May 21 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python中的id()函数指的什么
2017/10/17 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python生成密码字典的方法
2018/07/06 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python基于requests库爬取网站信息
2020/03/02 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
医学检验专业大学生求职信
2013/11/18 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
计算机软件专业求职信
2014/06/10 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis