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 相关文章推荐
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 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实现的zip文件内容比较类
2014/09/24 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
Vue表单实例代码
2016/09/05 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
机器学习python实战之决策树
2017/11/01 Python
python绘制立方体的方法
2018/07/02 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python读写csv文件的方法
2019/08/13 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
经典C++面试题一
2016/11/06 面试题
个人自我鉴定写法
2013/11/30 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
Python如何加载模型并查看网络
2022/07/15 Python