[ad_1]
Grâce au code ci-dessous, je peux voir cet œil, mais lorsque je clique dessus, le mot de passe n’est pas masqué et affiché… aidez-moi ?
Ce que j’ai essayé :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<body> <asp:TextBox ID="txtPassword" runat="server" ValidationGroup="a" TextMode="Password" CssClass="form-control-sm"></asp:TextBox> <span id="toggle_pwd" class="fa fa-fw fa-eye field_icon"></span> <script type="text/javascript"> $(function () { $("#toggle_pwd").click(function () { $(this).toggleClass("fa-eye fa-eye-slash"); var type = $(this).hasClass("fa-eye-slash") ? "text" : "password"; $("#txtPassword").attr("type", type); }); }); </script> </body>
Solution 1
Vous êtes presque sur la bonne voie – le code ci-dessous est obtenu à partir de ICI
Ajoutez des liens cdn jQuery, bootstrap et fa icon à la section head.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Écrivez du JavaScript et une fonction pour masquer et afficher le mot de passe.
<script type="text/javascript"> $(document).ready(function () { $('#show_password').hover(function show() { //Change the attribute to text $('#txtPassword').attr('type', 'text'); $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye'); }, function () { //Change the attribute back to password $('#txtPassword').attr('type', 'password'); $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash'); }); //CheckBox Show Password $('#ShowPassword').click(function () { $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password'); }); }); </script>
Concevez du HTML en faisant glisser et en déposant le contrôle de zone de texte, le contrôle de case à cocher et le contrôle de bouton comme indiqué ci-dessous.
<body> <form id="form1" runat="server"> <div class="container"> <h2>Show or Hide Password</h2> <div class="row"> <div class="col-md-6"> <p>Hover on the eye to show/hide the password</p> <label>Password</label> <div class="input-group"> <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox> <div class="input-group-append"> <button id="show_password" class="btn btn-primary" type="button"> </button> </div> </div> </div> <div class="col-md-6"> <p>Check to show/hide the password</p> <label>Password</label> <div class="input-group"> <asp:TextBox ID="Password" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox> <div class="input-group-append"> <asp:CheckBox ID="ShowPassword" runat="server" CssClass="checkbox" /> </div> </div> </div> </div> </div> </form> </body>
Solution 2
Il y a quelque temps, j’ai utilisé ce code de travail html jQuery :
HTML
<input id="pwd" type="password"/><input class="btneye" id="btntoggle" type="submit" value="__s" /> <script type="text/javascript" language="JavaScript"> $('.clickme').click(function() { btn_actual=$('#btntoggle').val(); if (btn_actual=='__s'){ $('#btntoggle').val($('#btntoggle').val().replace('__s','__h')); $('#btntoggle').css('background-image','url(img/eyeoff.png)'); $('#pwd').attr('type','text'); } else { $('#btntoggle').val($('#btntoggle').val().replace('__h','__s')); $('#btntoggle').css('background-image','url(img/eyeon.png)'); $('#pwd').attr('type','password'); } return false; });
Solution 3
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" /> <span style="cursor:pointer" onclick="javascript:togglePassword(MainContent_Password)"></span> <script> function togglePassword(obj) { obj.type = obj.type == 'password' ? 'text' : 'password'; } </script>
[ad_2]
コメント