Vanilla JS: Phát hiện có bật Caps Lock hay không?

https://viblo.asia/p/vanilla-js-phat-hien-co-bat-caps-lock-hay-khong-LzD5dakOKjY

by trung ken

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
  <h2 class="my-5 text-center">Vanilla JS: Detect Caps Lock</h2>
  <div class="row justify-content-center">
    <div class="col-10">
      <input type="text" class="form-control" />
      <p class="text-muted">(Nhập text vào ô input để kiểm tra <b>Caps Lock</b> có bật hay không)</p>
      <div id="capsLockWarning" class="text-danger mt-3"></div>
    </div>
  </div>
</div>

JavaScript

const ipnElement = document.querySelector('input')
const messageElement = document.querySelector('#capsLockWarning')

ipnElement.addEventListener('keydown', function (keyboardEvent) {
  if (keyboardEvent.getModifierState('CapsLock')) {
    messageElement.textContent = 'Caps lock is on'
  } else {
    messageElement.textContent = ''
  }
})