Vanilla JS: Ẩn hiện mật khẩu

https://viblo.asia/p/vanilla-js-an-hien-mat-khau-maGK73oOKj2

by trung ken

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
  <h3 class="mt-5 mb-5 text-center">Toggle password visibility</h3>
  <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>
    <p class="text-muted">(Nhập pass vào ô input ở trên và click vào icon con mắt để hiển thị)</p>
  </div>
</div>

JavaScript

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

// step 2
btnElement.addEventListener('click', function() {
  // step 3
  const currentType = ipnElement.getAttribute('type')
  // step 4
  ipnElement.setAttribute(
    'type',
    currentType === 'password' ? 'text' : 'password'
  )
})