Membuat Tombol Show Password menggunakan JQuery

28/10/2018    Maykhel David    594     Website

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

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More