Membuat Tombol Show Password menggunakan JQuery

Membuat Tombol Show Password menggunakan JQuery - Hallo semuanya pada artikel kali ini saya akan membahas tentang salah satu fitur yang sangat populer dan sangat sering digunakan oleh berbagai situs, baik situs biasa, bahkan situs besar seperti facebook, google, microsoft, dan yang lainnya juga menggunakan fitur ini.
Apa yang akan kita bahas kali ini? sekarang ini kita akan membahas tentang bagaimana cara membuat tombol show password menggunakan jquery. Ya, tentu pastinya kalian pernah melihat fitur ini pada banyak website kan? ingin tahu cara membuatnya? sekarang kita akan lihat tutorialnya.
saat ini kita akan coba menggunakan template bootstrap untuk mempermudah membuat tampilannya.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Selanjutya, kita akan membuat struktur form login dengan css seperti berikut

<div class="row justify-content-center mt-5">
      <div class="col-3">
        <h2 class="text-center mb-4">LOGIN</h2>
        <div class="input-group mb-2 mr-sm-2">
          <input type="text" class="form-control" id="inputUsername" placeholder="Username">
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          <div class="input-group-prepend">
            <input type="checkbox" id="showhide" class="d-none">
            <label class="input-group-text btn btn-secondary" for="showhide">Show</label>
          </div>
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <input type="submit" class="form-control btn btn-success" value="Login" >
        </div>
      </div>
    </div>

selanjutnya kita akan memberikan fungsi jquery untuk membuat tombol show password berfungsi

$(document).ready(function(){   
    $('#showhide').click(function(){
      if($(this).is(':checked')){
        $('#inputPassword').attr('type','text');
      }else{
        $('#inputPassword').attr('type','password');
      }
    });
  });

Baiklah teman teman, demikian artikel kali ini yang membahas tentang cara membuat tombol show password dengan menggunakan jquery, semoga bermanfaat

 

28 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat