@keydown for caps lock?

[Diddyy]

Hey! 👋

Im currently giving my login page a spruce up with alpine. I'm trying to warn users on the login page when their caps lock is on. I'm aware of things like @keydown.escape but can't find anything for identifying when the caps lock is on, unless I've missed something?

Many Thanks

[ryangjchandler]

@Diddyy You'll want to use the keyup event & then $event.getModifierState('CapsLock') to check if caps lock is on or not.

[Diddyy]

Thank you.
If anyone looks for this in future here's what I did.

        document.querySelector("#password").addEventListener('keyup', detectCapsLock);
        document.querySelector("#password").addEventListener('mousedown', detectCapsLock);

        function detectCapsLock(event) {
            var caps_lock_on = event.getModifierState('CapsLock');
            if (caps_lock_on == true) {
                document.getElementById("capslock").innerHTML = "<span class='text-xs font-medium text-red-700'> Psst.. Did you know your caps lock is on?</span>";
            } else {
                document.getElementById("capslock").innerHTML ="";
            }
            
        }
</script>

<input  id="password" type="password" name="password" placeholder="****" required onkeydown="detectCapsLock(event)">

[SimoTod]

Yeah, that one is the vanillaJs solution.
If you look for something more Alpine-like you can do

<div x-data="{caps: false}">
  <input type="password" @keydown="caps = $event.getModifierState('CapsLock')"/>
  <span x-show="caps" class="text-xs font-medium text-red-700">Psst.. Did you know your caps lock is on?</span> 
</div>