[ad_1]
Dengan kode di bawah ini saya dapat melihat mata itu tetapi ketika saya mengkliknya maka kata sandi tidak disembunyikan dan ditampilkan…tolong saya?
Apa yang saya coba:
<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>
Solusi 1
Anda hampir berada di jalur yang benar – kode di bawah ini diperoleh DI SINI
Tambahkan tautan cdn ikon jQuery, bootstrap, dan fa ke bagian kepala.
<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>
Tulis JavaScript dan berfungsi untuk menyembunyikan dan menampilkan kata sandi.
<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>
Rancang HTML dengan menyeret dan melepaskan kontrol kotak teks, kontrol kotak centang, dan kontrol tombol seperti yang diberikan di bawah ini.
<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>
Solusi 2
Waktu yang lalu saya menggunakan kode kerja html jQuery ini:
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; });
Solusi 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]
コメント