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学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
js获取视频时长代码
Apr 10 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
Angular2库初探
Mar 01 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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抓取及分析网页的方法详解
2016/04/26 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
暑期研修感言
2014/02/17 职场文书
小学生运动会报道稿
2014/09/12 职场文书
办理房产证委托书
2014/09/18 职场文书
会计试用期自我评价
2014/09/19 职场文书
报到证办理个人委托书
2014/10/06 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python