Cara Membuat Show and Hide Password dengan jQuery

Cara Membuat Show and Hide Password dengan jQuery

Admin
Admin・ 3 Mei 2021
7 min read ・ 5094 views

Show and Hide Password - Pada kesempatan kali ini saya akan membagikan artikel yang akan membahas bagaimana cara membuat fitur show and hide password dengan jQuery. Disini nanti saya akan berikan contoh pembuatannya dengan bootstrap versi 4.6 dan tentunya jQuery.

Kenapa kita perlu membuat show and hide password ? fitur show and hide password akan sangat membantu user dalam proses input password dari user aksesnya pada form password. Karena kalau tanpa adanya button show and hide password, jika terjadi kesalahan password user tidak bisa melihat apa benar atau memang salah password yang dia inputkan.

Maka dari itu perlu kita buatkan fitur show and password pada setiap form input password. OK langsung saja kita ke langkah-langkah cara membuat show and hide password dengan jQuery.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <title>Show and Hide Password with jQuery</title>
    </head>
    <body>
       
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    </body>
</html>

Disini saya sudah menyiapkan starter template dari bootstrap 4.6. Teman-teman bisa memulainya dengan membuat file html yang diberikan nama misalnya index.html. Kemudian silahkan copy seluruh kode di atas lalu paste di file index.html yang baru saja dibuat. Jika sudah, silahkan save lalu coba buka di browser. Hasilnya masih kosong, maka dari itu kita perlu membuat form-form yang akan gunakan, terutama form password yang nantinya akan kita buat show and hide password.

<div class="container">
    <div class="row py-5">
        <div class="col-5 mx-auto">
            <form>
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="input-group" id="show_hide_password">
                        <input type="password" name='password' class="form-control" name="password" required autocomplete="current-password">
                        <div class="input-group-append">
                            <a href="" class="btn btn-outline-secondary"><i class="bi bi-eye-slash" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">login</button>
            </form>
        </div>
    </div>
</div>

Tambahkan kode di atas di bawah tag <body>. Jika kita perhatikan pada input group password kita menambahkan id="show_hide_password" yang akan kita definisikan di potongan script jQuery nantinya.

Dan juga terdapat icon bi bi-eye-slash dari icon.getbootstrap, oleh karena itu kita perlu menambahkan atau import icon getbootstrap. Kita akan menggunakan icon getbootstrap versi CDN, jadi pastikan terkoneksi internet untuk melihat hasilnya.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">

Tambahkan kode tag link yang menghubungan ke icon.getbootstrap.com di antara tag <head></head>.

<script>
    $(document).ready(function() {
    $("#show_hide_password a").on('click', function(event) {
        event.preventDefault();
        if($('#show_hide_password input').attr("type") == "text"){
            $('#show_hide_password input').attr('type', 'password');
            $('#show_hide_password i').addClass( "bi bi-eye-slash" );
            $('#show_hide_password i').removeClass( "bi bi-eye" );
        }else if($('#show_hide_password input').attr("type") == "password"){
            $('#show_hide_password input').attr('type', 'text');
            $('#show_hide_password i').removeClass( "bi bi-eye-slash" );
            $('#show_hide_password i').addClass( "bi bi-eye" );
        }
    });
    });
</script>

Sekarang kita masuk ke script jQuery. Tambahkan kode jQuery di atas sebelum tag </body>. Sedikit penjelasan mengenai script jQuery di atas, saat id show_hide_password kita klik jika pada form input mempunyai nilai type text maka akan diubah menjadi type password dengan menambahkan juga class icon bi bi-eye-slash dan menghapus class bi bi-eye. Dan jika pada form input dengan id show_hide_password mempunyai nilai type password maka akan diubah menjadi type text diikuti dengan menghapus class icon bi bi-eye-slash dan menambahkan class icon baru bi bi-eye.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
        <title>Show and Hide Password with jQuery</title>
    </head>
    <body>
        <div class="container">
            <div class="row py-5">
                <div class="col-5 mx-auto">
                    <form>
                        <div class="form-group">
                            <label for="email">Email address</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <div class="input-group" id="show_hide_password">
                                <input type="password" name='password' class="form-control" name="password" required autocomplete="current-password">
                                <div class="input-group-append">
                                    <a href="" class="btn btn-outline-secondary"><i class="bi bi-eye-slash" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">login</button>
                    </form>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {
            $("#show_hide_password a").on('click', function(event) {
                event.preventDefault();
                if($('#show_hide_password input').attr("type") == "text"){
                    $('#show_hide_password input').attr('type', 'password');
                    $('#show_hide_password i').addClass( "bi bi-eye-slash" );
                    $('#show_hide_password i').removeClass( "bi bi-eye" );
                }else if($('#show_hide_password input').attr("type") == "password"){
                    $('#show_hide_password input').attr('type', 'text');
                    $('#show_hide_password i').removeClass( "bi bi-eye-slash" );
                    $('#show_hide_password i').addClass( "bi bi-eye" );
                }
            });
            });
        </script>
    </body>
</html>

Dan secara keseluruhan kode yang telah kita buat pada percobaan membuat show and hide password dengan jQuery bisa dilihat seperti kode di atas. 

OKE sekian artikel kali ini, sampai disini kita sudah sama-sama belajar bagaimana cara membuat fitur show and hide password menggunakan jQuery dan dengan bootstrap versi 4.6. Silahkan teman-teman improve sendiri sesuai dengan kebutuhan teman-teman. 

Jika ada kritik, saran, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis komentar pada form komentar di bawah ini. Sampai jumpa lagi di artikel dengan bahasan lain yang tidak kalah menarik. See you.