Jquery显示/隐藏密码

voase2hg 于 2023-03-22 发布在 jQuery

关注(0)|答案(9)|浏览(153)

下面的Jquery工作正常，但我如何缩短这个Jquery？我必须显示和隐藏密码和确认密码的密码？https://jsfiddle.net/c5cvLo54/1/

$(".password-showhide .show-password").click(function() {
    $("#password").attr("type", "text");
    $(".password-showhide .show-password").hide();
    $(".password-showhide .hide-password").show();
});
$(".password-showhide .hide-password").click(function() {
    $("#password").attr("type", "password");
    $(".password-showhide .hide-password").hide();
    $(".password-showhide .show-password").show();
});

$(".confirm-password-showhide .show-password").click(function() {
    $("#confirmPassword").attr("type", "text");
    $(".confirm-password-showhide .show-password").hide();
    $(".confirm-password-showhide .hide-password").show();
});
$(".confirm-password-showhide .hide-password").click(function() {
    $("#confirmPassword").attr("type", "password");
    $(".confirm-password-showhide .hide-password").hide();
    $(".confirm-password-showhide .show-password").show();
});

jquery

来源：https://stackoverflow.com/questions/45561636/jquery-show-hide-password

9条答案

按热度按时间

rmbxnbpk1#

以下是其中一种方法，可以缩短代码：

$(document).ready(function() {

  $(".show-password, .hide-password").on('click', function() {
    var passwordId = $(this).parents('li:first').find('input').attr('id');
    if ($(this).hasClass('show-password')) {
      $("#" + passwordId).attr("type", "text");
      $(this).parent().find(".show-password").hide();
      $(this).parent().find(".hide-password").show();
    } else {
      $("#" + passwordId).attr("type", "password");
      $(this).parent().find(".hide-password").hide();
      $(this).parent().find(".show-password").show();
    }
  });
});

li {
  list-style: none
}

.hide-password {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="password" name="password" id="password" />
    <span class="password-showhide">
<span class="show-password">Show</span>
    <span class="hide-password">hide</span>
    </span>
    <li>
      <li>
        <input type="password" name="password" id="confirmPassword" />
        <span class="confirm-password-showhide">
<span class="show-password">Show</span>
        <span class="hide-password">hide</span>
        </span>
        <li>
</ul>

赞(0）回复(0）举报 2023-03-22

ecbunoof2#

您只能使用一个按钮来控制。

联属萨摩亚

$('.showOrHide').click(function(e){
    var target = e.currentTarget
    $(target).hasClass('show')?hidePassword($(target)):showPassword($(target))
})
function hidePassword(e){
    e.removeClass('show').addClass('hide')
    e.prev('input').attr('type','password')
}
function showPassword(e){
    e.removeClass('hide').addClass('show')
    e.prev('input').attr('type','text')
}

超文本标记语言：

<input type="text" value="123456">
<button class="showOrHide show">click</button>

中央支助组：

.show{
    /* css you want */
    color: blue
}
.hide{
    /* css you want */
    color: red
}

赞(0）回复(0）举报 2023-03-22

watbbzwu3#

我创建了这个基本上是通过参考谷歌的显示密码切换他们的登录形式。
这基本上是检查复选框是否被选中。
如果选中，则将密码的输入类型更改为文本，反之亦然。

<!-- Toggle password visibility -->

    $(document).ready(function() {
        $("#show-password").change(function(){
            $(this).prop("checked") ?  $("#upassword").prop("type", "text") : $("#upassword").prop("type", "password");    
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="password" name="password" id="upassword" />
<input type="checkbox" id="show-password">
  <label for="show-password">Show Password

赞(0）回复(0）举报 2023-03-22

0sgqnhkj4#

这是我认为你能得到的最短的了

$(".confirm-password-showhide .trigger-password, .password-showhide .trigger-password").click(function() {
  var c = $(this).parent().attr("class").replace("-showhide", "");
  var obj = $("#" + (c.indexOf("confirm") > -1 ? "confirmPassword" : "password"));
  obj.attr("type", obj.attr("type") == "text" ? "password" : "text");
  $(this).text($(this).text() == "hide" ? "show" : "hide");
});

我还删除了每个密码的“隐藏”范围。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-22

lymnna715#

显示/隐藏密码功能

function togglePassword($element){
    var newtype=$element.prop('type')=='password'?'text':'password';
    $element.prop('type',newtype);
}
$(document).ready(function() {
      $('#showUserNewPass').change(function(){
          togglePassword($('#userNewPass'));
          togglePassword($('#confirmNewPassword'));
      });
});

赞(0）回复(0）举报 2023-03-22

7hiiyaii6#

<html>
    <head>
    <title>This Password Hide & Show</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        #password
        {
            width: 50%;

        }
        #open
        {
            color: gray;
        }
        #closed
        {
            display: none;
            color: steelblue;
        }
        i
        {
            position: absolute;
            margin-top: -30px;
            margin-left: 280px;
        }
    </style>
     <script type="text/javascript">
         $(document).ready(function(){

             $("#open").click(function(){
                 $("#open").hide();
                 $("#closed").show();
                 $("#password").attr("type","text");
             });

             $("#closed").click(function(){
                 $("#closed").hide();
                 $("#open").show();
                 $("#password").attr("type","password");
             });

         });

</script>
</head>
<body>
    <h4>Password Hide & Show</h4>
    <input class="form-control" type="password" placeholder="Password" id="password" name="pwd">
    <i id="open" class="fa fa-eye fa-2x"></i>
    <i id="closed" class="fa fa-eye-slash fa-2x"></i>
</body>

</html>

赞(0）回复(0）举报 2023-03-22

sqyvllje7#

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  <div class="container">
        <div class="row">
          <div class="col-md-offset-3 col-md-6">
            <h2>Show or Hide Password</h2>
            <p class="instructions">Hover on the eye to show/hide the password</p>
            <div class="input-group">
              <input id="password" type="password" class="form-control" placeholder="password">
              <span class="input-group-btn">
                <button id="show_password" class="btn btn-secondary" type="button">
                  <span class="glyphicon glyphicon-eye-open"></span>
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>
    <script>
        $("#show_password").hover(
          function functionName() {
            //Change the attribute to text
            $("#password").attr("type", "text");
            $(".glyphicon").removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
          },
          function () {
            //Change the attribute back to password
            $("#password").attr("type", "password");
            $(".glyphicon").removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open");
          }
        );
      </script>

赞(0）回复(0）举报 2023-03-22

r7knjye28#

下面是一个示例，说明如何在密码文本框中添加眼睛图标，并使用CSS和JavaScript切换密码的可见性：

$(document).ready(function () {
    $(".toggle-password").click(function () {
        var passwordInput = $($(this).siblings(".password-input"));
        var icon = $(this);
        if (passwordInput.attr("type") == "password") {
            passwordInput.attr("type", "text");
            icon.removeClass("fa-eye").addClass("fa-eye-slash");
        } else {
            passwordInput.attr("type", "password");
            icon.removeClass("fa-eye-slash").addClass("fa-eye");
        }
    });
})

.password-input-container {
    position: relative;
}

.password-input {
    padding-right: 32px;
}

.toggle-password {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 9999;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="form-group">
    <label class="mt-2" for="txtPasswordLogin">Password</label>
    <div class="password-input-container">
        <input type="password" class="form-control password-input" id="txtPasswordLogin" placeholder="Enter Password">
        <i class="toggle-password fa fa-eye"></i>
    </div>
</div>

赞(0）回复(0）举报 2023-03-22

axkjgtzd9#

<script>
        
        $(document).ready(function(){

            $('#btn').click(function(){

                var paswd= $('#password');
                if(paswd.attr("type")== "password"){

                    paswd.attr("type","text");

                    $('#btn').attr("value","hide");
                    
                }
                else{
                        paswd.attr("type","password");

                        $('#btn').attr("value","show");
                }
            })
        });
    
       
    </script>

赞(0）回复(0）举报 2023-03-22

我来回答

Jquery显示/隐藏密码

9条答案

相关问题

热门标签

最新问答