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小括号“()”的多义性
Dec 03 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
解决Vue项目中tff报错的问题
Oct 21 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php利用事务处理转账问题
2015/04/22 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python素数检测实例分析
2015/06/15 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python实现查找所有程序的安装信息
2020/02/18 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015年教研组工作总结
2015/05/04 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python之matplotlib绘制折线图
2022/04/13 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers
Android Studio 计算器开发
2022/05/20 Java/Android