Cara Menampilkan dan Menyembunyikan Password Menggunakan Bootstrap 3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menampilkan dan Menyembunyikan Password Menggunakan Bootstrap 3.

Fungsi Menampilkan dan Menyembunyikan Password itu sendiri adalah untuk mengkoreksi apakah password yang kita masukan sesusai dengan apa yang kita inginkan. sehingga meminimalisir kesalahan dalam memasukan password.

Sekarang saya akan membuat input password sederhana menggunakan bootstrap sebagai contoh saja. Berikut tutorial singkat tentang Cara Menampilkan dan Menyembunyikan Password Menggunakan Bootstrap 3:

– Pertama teman-teman download framework bootstrapnya dulu.

– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman

– Ketiga kita buat kode html-nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Home</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
   <div class="container">
  
      <div class="row">
        <div class="col-g-12 col-md-12 col-sm-12 col-xs-12">

          <div class="page-header">
            <h2>Menampilkan dan Menyembunyikan Password Menggunakan Bootstrap 3</h2>  
          </div>
          
        </div>
      </div>
        
        
      <div class="row">
        <div class="col-g-12 col-md-12 col-sm-12 col-xs-12">
          
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Password</label>
              <input type="password" class="form-control" id="password-input" placeholder="Password">
            </div>
            
            <div class="checkbox">
              <label>
              <input type="checkbox" id="enable-show"> Show Password
              </label>
            </div>
          </form>  
              
        </div>
      </div>

    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

– Keempat kita masukan css internal untuk merapikan saja:

  <style type="text/css">
    .container {
    margin-top: 5rem;
}
  </style>

Maka apabila di jalankan dibrowser tampilannya akan menjadi seperti ini:

– Kelima kita buat javascriptnya, dan save di dalam folder js dengan nama file sh.js di bootstrap:

(function ($) {
    $.toggleShowPassword = function (options) {
        var settings = $.extend({
            field: '#password',
            control: '#toggle_show_password'
        }, options);
        var control = $(settings.control);
        var field = $(settings.field);
        control.bind('click', function () {
            if (control.is(':checked')) {
                field.attr('type', 'text');
            } else {
                field.attr('type', 'password');
            }
        });
    };
}(jQuery));

– Keenam kita panggil file sh.js dengan cara memasukan script dibawah ini :

 <!--script untuk menampilkan dan meyembunyikan password-->
    <script src="js/sh.js"></script>

    <!--Untuk memamggil script sh.js-->
    <script>
      $.toggleShowPassword({
      field: '#password-input',
      control: '#enable-show'
      });   
    </script>

Hasilnya akan seperti ini apabila kita ketikan password:

dan apabila kita ceklis checkbox show passsword maka hasilnya akan seperti ini :

Bagaimana teman-teman cukup mudahkan Menampilkan dan Menyembunyikan Password Menggunakan Bootstrap 3.

Sekian artikel saya hari ini tentang Cara Menampilkan dan Menyembunyikan Password Menggunakan Bootstrap 3.

Sehat selalu ya teman-teman, selamat mencoba.