整理:密码输入框点击眼睛可以查看密码

最新推荐文章于 2025-04-04 23:55:43 发布

红烧茄子蛋炒饭

最新推荐文章于 2025-04-04 23:55:43 发布

阅读量9k

点赞数 2

分类专栏： jQuery 文章标签：密码框查看密码 input框可查看密码 input

本文链接：https://blog.youkuaiyun.com/qq_41229582/article/details/84060996

版权

jQuery 专栏收录该内容

14 篇文章

订阅专栏

HTML:

<div class="form-text-login nob">
   <label class="font-two iconfont icon-suo"></label>
   <input style="border: none" maxlength="16" type="password" name="password" id="lPassword" class="form-text "   placeholder="请输入密码">
   <i class="r loginI  iconfont icon-biyanjing" id="togglePassword"></i>
</div>

JQ:

$("#togglePassword").click(function () {
         var hClass= $("#togglePassword").hasClass("icon-yanjing");
   if(hClass==true){
              $("#togglePassword").removeClass("icon-yanjing");
              $("#togglePassword").addClass("icon-biyanjing");
              $("#lPassword").attr("type", "password");
   }else if(hClass==false){
              $("#togglePassword").addClass("icon-yanjing");
              $("#togglePassword").removeClass("icon-biyanjing");
              $("#lPassword").attr("type", "text");
   }
效果图: