Question

How to tell if Caps Lock is on in JavaScript

Answer 1

<!-- HTML -->
<input type="text">

// JavaScript
document.addEventListener('keydown', function(event) {
  let caps = event.getModifierState && event.getModifierState('CapsLock');

  console.log(caps); // == true when you press the Caps Lock key
})

// Input: ABcd


/*
run:

true
true
false // Press the Caps Lock
false
false

*/

 

70+ SQL courses for beginners and professionals

Answer 2

<!-- html -->
<input type="text" id="inputBox" placeholder="Type here..." />
  <p id="warning" style="color: red;"></p>

// JavaScript
const inputBox = document.getElementById('inputBox');
    const warning = document.getElementById('warning');

    inputBox.addEventListener('keydown', function(event) {
      if (event.getModifierState && event.getModifierState('CapsLock')) {
        warning.textContent = 'Caps Lock is ON';
      } else {
        warning.textContent = '';
      }
    });

 

70+ SQL courses for beginners and professionals