扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >jQuery如何实现输入框密码的显示隐藏
  • 768

0
分享到

jQuery如何实现输入框密码的显示隐藏

2024-04-02 19:04:59 768人浏览 独家记忆
摘要

这篇文章主要为大家展示了“Jquery如何实现输入框密码的显示隐藏”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现输入框密码的显示隐藏”这篇文

这篇文章主要为大家展示了“Jquery如何实现输入框密码的显示隐藏”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现输入框密码的显示隐藏”这篇文章吧。

效果图：

jQuery如何实现输入框密码的显示隐藏

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>jQuery输入框密码显示隐藏代码</title>
<!--手机端需要添加-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--基础样式-->

<style type="text/CSS">

@font-face {font-family: "iconfont";
 src: url('iconfont.eot'); 
 src: url('iconfont.eot?#iefix') fORMat('embedded-opentype'), 
 url('iconfont.woff') format('woff'), 
 url('iconfont.ttf') format('truetype'), 
 url('iconfont.svg#iconfont') format('svg'); 
}

.iconfont {
 font-family:"iconfont" !important;
 font-size:16px;
 font-style:normal;
 -WEBkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;
}
.icon-suoyoulianxiren:before { content: "\e600"; }
.icon-suo:before { content: "\e606"; }
.icon-wo2:before { content: "\e601"; }
.icon-sousuo:before { content: "\e619"; }
.icon-shezhi:before { content: "\e602"; }
.icon-wo01:before { content: "\e603"; }
.icon-bofang:before { content: "\e622"; }
.icon-yanjing:before { content: "\e627"; }
.icon-bianjimingpianline37:before { content: "\e604"; }
.icon-wodemingpianline:before { content: "\e605"; }
.icon-yirenzheng:before { content: "\e608"; }
.icon-shenqingjieshourenwu:before { content: "\e609"; }
.icon-jinlingyinGCaiwangtubiao53:before { content: "\e60a"; }
.icon-jinlingyingcaiwangtubiao11:before { content: "\e621"; }
.icon-qiyerenzheng:before { content: "\e60b"; }
.icon-dingwei:before { content: "\e60c"; }
.icon-xiala:before { content: "\e61a"; }
.icon-shangla:before { content: "\e61b"; }
.icon-shoujirenzheng:before { content: "\e60d"; }
.icon-yanjingkai:before { content: "\e624"; }
.icon-filter:before { content: "\e61c"; }
.icon-shoucang:before { content: "\e607"; }
.icon-shoucang1:before { content: "\e61d"; }
.icon-youjiantou:before { content: "\e61e"; }
.icon-yonghukong:before { content: "\e620"; }
.icon-fanhui:before { content: "\e618"; }
.icon-auth:before { content: "\e60e"; }
.icon-shanchu:before { content: "\e623"; }
.icon-xiangji:before { content: "\e626"; }
.icon-xueli111:before { content: "\e611"; }
.icon-Gongzuoshijian:before { content: "\e612"; }
.icon-gongzuojingyandl:before { content: "\e613"; }
.icon-fujin1:before { content: "\e614"; }
.icon-fujin2:before { content: "\e615"; }
.icon-xiaoxi1:before { content: "\e60f"; }
.icon-xiaoxi2:before { content: "\e610"; }
.icon-shouye1:before { content: "\e616"; }
.icon-shouye2:before { content: "\e617"; }
.icon-dianhua1:before { content: "\e61f"; }

 * { padding: 0; margin: 0; }
body { background: #f2f2f2; font-family:"微软雅黑"; min-width: 320px; max-width: 640px; margin: 0 auto; }
ul, li { list-style: none; }
i, em { font-style: normal; }
img { border: none; margin: 0; padding: 0; }
a { text-decoration: none; color: #333; }
a:focus { outline: none; }
.clear { clear: both }
.clear_wl:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }
.fl { float: left }
.fr { float: right }
.text_c { text-align: center; }
 
.bule_color { color: #00b4c9; }

.hs_color { color: #FE9F07; }
.green_color { color: #85c860; }
.c333 { color: #333; }
.c666 { color: #666; }
.c999 { color: #999; }
.f10 { font-size: 0.5rem; }
.f11 { font-size: 0.55rem; }
.f12 { font-size: 0.6rem; }
.f14 { font-size: 0.7rem; }
.f16 { font-size: 0.8rem; }
.f18 { font-size: 0.9rem; }
.all_wap { width: 15.5rem; margin-left: 0.5rem; }
.all_center_box { width: 15rem; margin: 0 auto; }
.footheight { height: 2.4rem; }
.mb5 { margin-bottom: 0.25rem; }

.heard_top { width: 100%; background: #00b4c9; color: #fff; position: relative; z-index: 2; height: 2.2rem; line-height: 2.2rem; }
.heard_top .top_table { width: 15rem; margin: 0 auto; }
.heard_top .top_table td { width: 50%; font-size: 0.6rem; }
.heard_top .top_table td .dw_a_but { display: block; height: 2.2rem; color: #fff; width: 30%; }
.heard_top .top_table td .map_dw { color: #fff; font-size: 0.7rem; }
.heard_top .top_texte { position: absolute; z-index: 22; top: 0; left: 50%; text-align: center; width: 9.5rem; margin-left: -4.75rem; font-size: 0.8rem; }

.heard_top .top_texte .xieh_title_list{ width:7rem; margin:0 auto; border:1px solid #e6f8fa; border-radius:0.25rem; height:1.4rem; line-height:1.4rem; text-align:center; overflow:auto; margin-top:0.4rem;}
.heard_top .top_texte .xieh_title_list li{ width:50%; float:left; }
.heard_top .top_texte .xieh_title_list li a{ display:block;color:#e6f8fa; font-size:0.7rem;}
.heard_top .top_texte .xieh_title_list li.on a{ background:#e6f8fa; color:#00b4c9;}


.scale { position: relative; }
.scale:after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 1px solid #DDD; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }

.ky_footer { width: 100%; background: #f8f8f8; position: fixed; z-index: 999; bottom: 0; left: 0; overflow: hidden;  }
.ky_footer ul { width: 100%; height: auto; overflow: hidden; }
.ky_footer ul li { float: left; width: 25%; padding: 0.2rem 0 }
.ky_footer ul li a { font-size: 0.55rem; text-align: center; width: 100%; display: block; color: #949494; }
.ky_footer ul li a i { font-size: 1.1rem; color: #949494; width: 100%; display: block; text-align: center; overflow: hidden; }
.ky_footer ul li.selected i, .ky_footer ul li.selected a { color: #00b4c9 }
a, button, input { -webkit-tap-highlight-color: rgba(255,0,0,0); }
.ky_footer .scale:after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; border-bottom: 1px solid #ddd; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }

.wntj_list li {  font-size: 0.6rem; padding: 0.25rem 0.5rem 0.5rem 0; }
.wntj_list li:last-child { border-bottom: none; }
.wntj_list li h5 { overflow: hidden; height: auto; font-size: 0.7rem; margin-bottom: 0.25rem; font-weight: 400; }
.wntj_list li p { height: auto; overflow: hidden; color: #333; margin-bottom: 0.25rem; }
.wntj_list li .gsfl_tb { height: auto; }
.wntj_list li .gsfl_tb span { font-size: 0.5rem; border: 1px solid #3D99FF; border-radius: 3px; color: #3D99FF; padding: 0 0.25rem; margin-right: 0.25rem; }

.blur_mh { filter: url(blur.svg#blur);  -webkit-filter: blur(10px);  -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); 
}


.clear_input { display: none; position: absolute; width:0.8rem; height: 0.8rem; border-radius:50%; margin: 0.6rem 0 0 0.75rem; outline: none; background:#CCC ; font-size:0.6rem; color:#fff; text-align:center; }
.ClearInput::-ms-clear { display: none; }
.ClearInput:valid + .clear_input { display: inline; }

 body { background: #FFF; }

.input_text { height: 2rem; border: none; text-align: right; color: #999; font-size: 0.7rem; }
.placeholder { color: #999; text-align: right; }

.login_reg { margin-top: 1rem; }
.login_reg li { background: #FFF; border: 1px solid #ddd; margin-bottom: 0.5rem; overflow: hidden; height: 2rem; }
.login_reg li i { color: #999; font-size: 0.8rem; padding-left: 0.2rem; padding-right: 0.25rem; }
.login_reg li .input_text_user { height: 2rem; border: none; text-align: left; color: #999; width: 11.5rem; font-size: 0.7rem; }
.login_reg li .input_text_passWord { height: 2rem; border: none; text-align: left; color: #999; width: 11rem; font-size: 0.7rem; }
.login_reg li .placeholder { color: #999; text-align: left; }
.login_reg li .eyes_box { display: inline-block; width: 1.5rem; text-align: right; }
.login_reg li .wenz { padding-left: 0.25rem; font-size: 0.7rem; color: #333; }
.login_reg li .w180 { width: 9rem; margin-left: 1rem; }
.login_reg .denglu_but { height: 2rem; line-height: 2rem; width: 15rem; display: block; font-size: 0.8rem; background: #00B4C9; color: #fff; border-radius: 0.25rem; text-align: center; margin: 1rem auto 0.25rem auto; }
 .input_text_user::-webkit-input-placeholder, .input_text_password::-webkit-input-placeholder {
color:#999;
}
.input_text_user::-moz-placeholder, .input_text_password::-moz-placeholder {
color:#999;
}

</style>
<!--js-->
<script src="Http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

</head>
<body>
<!--头部展示-->
 <div class="login_reg all_center_box">
 <ul>
  <li> <i class="icon iconfont"></i>
  <input name="" type="text" class="input_text_user ClearInput " placeholder="用户名/手机" required>
  <a href="javascript:" rel="external nofollow" class="clear_input">x</a>
  </li>
  <li> <i class="icon iconfont "></i>
  <input name="" type="password" class="input_text_password mima_dd " placeholder="请输入密码">
  <input name="" type="text" class="input_text_password mima_wz"  placeholder="请输入密码">
  <a class="eyes_box " data-show="1" href="javascript:void(0);" rel="external nofollow" ><i class="icon iconfont"></i></a>
  </li>
 </ul>
 <a href="#" rel="external nofollow" rel="external nofollow" class="denglu_but">登录</a>
 <p align="center">
  <a href="#" rel="external nofollow" rel="external nofollow" class="f12 c999">忘记密码</a>
 </p>
 </div>

</body>

<script type="text/javascript">
 $(function() {

//查看密码
$(".eyes_box").click(function(){
 if($(this).attr("data-show")==1){//明文
 $(this).attr("data-show","2");
 $(this).children("i").html("");
 $(this).parent("li").children(".mima_dd").hide();
 $(this).parent("li").children(".mima_wz").show();
 $(this).parent("li").children(".mima_wz").val($(this).parent("li").children(".mima_dd").val()); 
 return;
 }
 if($(this).attr("data-show")==2){//密文
 $(this).attr("data-show","1");
 $(this).children("i").html("");
 $(this).parent("li").children(".mima_dd").show();
 $(this).parent("li").children(".mima_wz").hide();
 $(this).parent("li").children(".mima_dd").val($(this).parent("li").children(".mima_wz").val()); 
 return;
 } 
 });
}); 
</script>
</html>

以上是“jQuery如何实现输入框密码的显示隐藏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！

--结束END--

本文标题: jQuery如何实现输入框密码的显示隐藏

本文链接: https://lsjlt.com/news/68895.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jQuery如何实现输入框密码的显示隐藏
    这篇文章主要为大家展示了“jQuery如何实现输入框密码的显示隐藏”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现输入框密码的显示隐藏”这篇文...
    99+
    2024-04-02
  • jquery 实现密码框的显示与隐藏示例代码
    复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.5.1.mi...
    99+
    2022-11-15
    jquery 密码框显示隐藏
  • Android实现动态显示或隐藏密码输入框的内容
    本文实例展示了Android实现动态显示或隐藏密码输入框内容的方法，分享给大家供大家参考之用。具体方法如下： 该功能可通过设置EditText的setTransformatio...
    99+
    2022-06-06
    隐藏密码 输入 动态 输入框 Android
  • html中如何实现密码隐藏显示
    小编给大家分享一下html中如何实现密码隐藏显示，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html实现密码隐藏显示的方法：首先写好HTML界面标签以及css样...
    99+
    2023-06-15
  • Android 显示和隐藏输入法实现代码
    代码如下: // 隐藏输入法 InputMethodManager imm = (InputMethodManager) getApplicationContext().ge...
    99+
    2022-06-06
    输入 输入法 Android
  • vue如何实现密码显示隐藏功能
    这篇文章给大家分享的是有关vue如何实现密码显示隐藏功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果：思路：利用input的type属性，当type值是text的时候展示密码，当type值是password...
    99+
    2023-06-14
  • Android实现密码隐藏和显示
    本文实例为大家分享了Android实现密码隐藏和显示的具体代码，供大家参考，具体内容如下 在Android开发中，需要密码的隐藏和显示,下面就和大家分享一下使用方法： xml代码: ...
    99+
    2022-11-13
    Android密码隐藏 Android密码显示 Android密码隐藏显示
  • jquery如何实现显示与隐藏的互换
    本篇内容主要讲解“jquery如何实现显示与隐藏的互换”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery如何实现显示与隐藏的互换”吧! ...
    99+
    2024-04-02
  • jquery实现控件隐藏显示
    jQuery是一种流行的JavaScript库，在前端开发中有着广泛的应用。本文将介绍如何使用jQuery实现控件的隐藏和显示。首先，我们需要在HTML页面中引入jQuery库。可以选择在线引入或下载本地引入。<head> ...
    99+
    2023-05-24
  • php如何实现代码的隐藏显示
    这篇文章主要介绍“php如何实现代码的隐藏显示”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“php如何实现代码的隐藏显示”文章能帮助大家解决问题。1.什么是PHP代码的隐藏和显示？PHP代码隐藏和显...
    99+
    2023-07-05
  • Android开发EditText实现密码显示隐藏
    最近在做一个登录、注册页面，里面需要显示或隐藏密码，故做了一个简单的显示和隐藏功能。 关键类TextView.setTransformationMethod(Transformati...
    99+
    2022-11-13
    Android EditText密码隐藏 Android EditText密码显示 Android密码显示隐藏
  • jquery如何显示隐藏控件
    jQuery是一个优秀的JavaScript库，它为我们提供了许多方便快捷的操作方法，其中包括控件的显示和隐藏，本文将介绍如何通过jQuery来显示和隐藏控件。一、如何隐藏控件使用hide()方法hide()方法是jQuery提供的最基本的...
    99+
    2023-05-18
  • Android中实现密码的隐藏和显示的示例
    在Android开发中，需要密码的隐藏和显示,下面就和大家分享一下使用方法：xml代码: <LinearLayout android:layout_width="match_parent" android:...
    99+
    2023-05-30
    android 密码 显示
  • vue之Element-Ui输入框显示与隐藏方式
    目录Element-Ui输入框显示与隐藏使用element-ui比较简单,添加show-password即可Element el-input 输入框详解1. 用途2. 输入框3. 文...
    99+
    2023-05-16
    vue Element-Ui输入框 Element-Ui输入框显示 Element-Ui输入框隐藏
  • Android中实现EditText密码显示隐藏的方法
    在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout，先看下效果图： <android.support.d...
    99+
    2022-06-06
    edittext 方法 Android
  • jquery如何显示已隐藏的div层
    这篇文章将为大家详细讲解有关jquery如何显示已隐藏的div层，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 jquery显示已隐藏div层...
    99+
    2024-04-02
  • Android实现显示和隐藏密码功能的示例代码
    在前端中我们知道用javascript就可以可以很容易实现，那么在Android中怎么实现这个功能呢？ Java代码 package com.example.test2; impo...
    99+
    2024-04-02
  • jquery attr()如何显示隐藏元素
    本篇内容主要讲解“jquery attr()如何显示隐藏元素”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery attr()如何显示隐藏元素”吧! ...
    99+
    2024-04-02
  • jQuery实现HTML元素隐藏和显示
    让我们来模仿一下淘宝网当你搜索某个商品的时候，那种显示全部品牌和显示部分品牌的功能。 首先我们来理清一下思路： 1、一开始需要先隐藏需要隐藏的元素 2、你需要通过jquery获取需要...
    99+
    2024-04-02
  • vue基于input如何实现密码的显示与隐藏功能
    vue基于input如何实现密码的显示与隐藏功能，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。前言大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当...
    99+
    2023-06-26
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作