Vanilla JS: Ẩn hiện password

1. Yêu cầu

Yêu cầu bài toán là người dùng nhập password vào ô input, khi click vào button con mắt bên cạnh thì hiện password này lên. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript thuần không framework nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript.

2. Giao diện HTML - CSS

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Vanilla JS Project: Ẩn hiện password</title>
    <!-- bootstrap css 4.5.0 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
    <!-- font awesome 5.13.1 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="mt-5 mb-5">Vanilla JS Project: Ẩn hiện password</h1>
      <div class="form-group">
        <label for="ipnPassword">Password</label>
        <div class="input-group mb-3">
          <input type="password" class="form-control" id="ipnPassword" />
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="btnPassword">
              <span class="fas fa-eye"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <script> // code Javascript </script>
  </body>
</html>

3. Hướng giải quyết chính

Bình thường khi input để chế độ type="password" thì toàn bộ những gì người dùng nhập vào đều được ẩn đi

<input type="password" />

Giờ để hiện password lên ta đổi sang type="text" là xong

<input type="text" />

4. Javascript

  • Step 1: Đặt biến để lưu trạng thái là đang ẩn hay hiện pass. Mặc định ban đầu là ẩn nên ta cho showPassword = false
  • Step 2: Đặt biến để lưu các thẻ html mình cần, ở đây là thẻ input và thẻ button
  • Step 3: Khi click vào button thì thay đổi thuộc tính type của thẻ input từ password sang text hoặc ngược lại
  • Lưu lại trạng thái ẩn hay hiện để lần sau tính toán
  • Dưới đây là toàn bộ code JS
// step 1
let showPassword = false

// step 2
const ipnElement = document.querySelector('#ipnPassword')
const btnElement = document.querySelector('#btnPassword')

// step 3
btnElement.addEventListener('click', function() {
  if (showPassword) {
    // Đang hiện password
    // Chuyển sang ẩn password
    ipnElement.setAttribute('type', 'password')
    showPassword = false
  } else {
    // Đang ẩn password
    // Chuyển sang hiện password
    ipnElement.setAttribute('type', 'text')
    showPassword = true
  }
})

5. Yêu cầu nâng cao

Ở trên cơ bản chúng ta đã giải quyết xong bài toán, các bạn có thể nâng cao làm thêm một vài yêu cầu nữa như:

  • Khi click vào button thì tùy thuộc trạng thái mà ta thay đổi hình icon cho hợp lí như icon nhắm mắt - mở mắt
  • Thay đổi kiểu hiện password theo kiểu nhấn và giữ chuột (click and hold) vào icon thì mới hiện pass, bỏ chuột ra thì lại ẩn đi

Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!


All Rights Reserved