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 隔行换色函数代码
Oct 24 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
js控制input输入字符解析
Dec 27 Javascript
js实现数组转换成json
Jun 26 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
JavaScript遍历DOM元素的常见方式示例
Feb 16 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php str_replace的替换漏洞
2008/03/15 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python 上下文管理器使用方法小结
2017/10/10 Python
python多维数组切片方法
2018/04/13 Python
python虚拟环境迁移方法
2019/01/03 Python
python执行精确的小数计算方法
2019/01/21 Python
Python中SQLite如何使用
2020/05/27 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
零件设计自荐信范文
2013/11/27 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
说明书范文
2014/05/07 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
终止合同协议书范本
2016/03/22 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js