Detect if the caps lock is on

<input type="text" id="textbox" />

<div id="message" />

const textboxEle = document.getElementById('textbox');
const messageEle = document.getElementById('message');

textboxEle.addEventListener('keydown', function (e) {
    const capsLockOn = e.getModifierState('CapsLock');

    // Update the content of message
    messageEle.innerHTML = capsLockOn ? 'Caps lock is ON' : '';

    // Show or hide the message based on the CapsLock state
    messageEle.style.display = capsLockOn ? 'block' : 'none';
});

const textboxEle = document.getElementById('textbox');
const messageEle = document.getElementById('message');

textboxEle.addEventListener('keypress', function (e) {
    const isMac = /Mac/.test(navigator.platform);

    const keyCode = e.keyCode || e.which;

    // Is the _Shift_ key pressed?
    const shiftKey = e.shiftKey || keyCode === 16;

    // Get the pressed character
    const s = String.fromCharCode(keyCode);
    const capsLockOn =
        (s.toUpperCase() === s && s.toLowerCase() !== s && !(shiftKey && isMac)) ||
        (s.toUpperCase() !== s && s.toLowerCase() === s && shiftKey);

    messageEle.innerHTML = capsLockOn ? 'Caps lock is ON' : '';
    messageEle.style.display = capsLockOn ? 'block' : 'none';
});