√ Show Hide Password HTML CSS Javascript

Show Hide Password HTML CSS Javascript

11/22/2020

Halo Sobat Teknisi, apa kabar? semoga semua baik-baik saja. Terimakasih telah berkunjung ke blog ini, semoga tulisan yang ada di sini dapat menjawab pertanyaan Sobat saat ini.

Pada artikel kali ini akan dibahas cara membuat fitur show hide password.

Sebelum praktek, kita harus menyiapkan Jquery terlebih dahulu. Jquery adalah library dari Javascript Sobat bisa mendownload atau memanggilnya menggunakan internet. Tetapi pada kesempatan kali ini kita akan menggunakan jquery secara online.

Berikut ini adalah kode HTML nya:

<body>
  <div class="body-form">
    <div class="form-content-user">
      <label for="password">Username</label>
      <input type="text" id="username" required autocomplete="off">
    </div>
    <div class="form-content-pass">
      <label for="password">Password</label>
      <input type="password" id="password" required autocomplete="off">
      <span id="togglePass"><span id="showPass">Show</span></span>
    </div>
        <button id="submit">Submit</button>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Perhatikan kodenya

<input type="password" id="password" required autocomplete="off">
<span id="togglePass"><span id="showPass">Show</span></span>

Yang menjadi fokus kita adalah id="" di setiap tag nya, ingat-ingat peletakan dan namanya. Karena id itulah yang akan kita panggil di script.

Setelah itu tambahkan CSS:

html {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f0f0f0;
}
.body-form {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-content-user {
  margin-bottom: 10px;
}
label{
  margin-bottom: 5px;
  display: block;
}
input {
  width: 100%;
  height: 25px;
  border: none;
}
input:focus {
  border: 1px solid #007bff;
}
#togglePass {
  background-color: #343a40;
  display: block;
  margin: 10px 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
}
button {
  width: 100%;
  background-color: #007bff;
  height: 30px;
  color: #fff;
}

Setelah itu tambahkan script, boleh langsung dimasukkan dalam HTML atau dibuat file sendiri dengan format .js lalu dipanggil di HTML nya. Berikut ini adalah script js nya:

$(document).ready(function(){
  $('#togglePass').on('click', function(event) {
    event.preventDefault();
    if ($('#password').attr("type") == "text") {
      $('#password').attr('type', 'password');
      $('#showPass').html('Show');
    } else if ($('#password').attr("type") == "password") {
      $('#password').attr('type', 'text');
      $('#showPass').html('Hide');
    }
  })
  $('#submit').on('click', function() {
    $(this).html('Loading..');
  })
})

Penjelasan script di atas,

$(document).ready(function(){

Jika di translate ke bahasa manusia kurang lebih artinya, "jquery jika dokumen siap maka jalankan fungsi ini". Fungsinya mana? jika dokumen telah siap maka semua semua script yang berada di dalam kurung kurawal {} akan dijalankan.

$('#togglePass').on('click', function(event) {
  event.preventDefault();
  if ($('#password').attr("type") == "text") {
    $('#password').attr('type', 'password');
    $('#showPass').html('Show');
  } else if ($('#password').attr("type") == "password") {
    $('#password').attr('type', 'text');
    $('#showPass').html('Hide');
  }
})

Jquery carikan id bernama togglePass lalu jika di klik jalankan fungsi ini:

Pada kondisi if pertama, jika id bernama password ber-atribut typenya text, ganti atributnya menjadi password, lalu carikan id bernama showPass tampilkan tulisan 'Show'.
Pada kondisi if kedua, jika id bernama password ber-atribut typenya password, ganti atributnya menjadi text, lalu carikan id bernama showPass tampilkan tulisan 'Hide'.

$('#submit').on('click', function() {
  $(this).html('Loading..');
})

Sebenarnya script diatas tidak ada sangkut pautnya dengan show hide password, tapi bisa Sobat gunakan jika ingin membuat tampilan saat submit ada feedback nya, biar ada efek-efek nya gitu.

Sobat bisa cek demonya di bawah ini:

DEMO

See the Pen Show Hide Password by Yusuf B (@yfbahtiar) on CodePen.

Begitu temen-temen cara membuat input password dapat dilihat dan ditutup isi fieldnya, hal ini sangat bermanfaat bagi user untuk mencegah kesalahan dalam menginput password.

Semoga dapat bermanfaat, jangan lupa untuk menekan tombol share di bawah ini supaya temen yang lain juga tidak ketinggalan informasi menarik dari blog teknisiserbabisa.com ini. Terimakasih, wassalam...

Teknisi Serba Bisa

Show Hide Password HTML CSS Javascript

Show Hide Password HTML CSS Javascript

Discussion