Keydown Event Is Not Fired For Capslock In Mac
Solution 1:
Yes, this is expected.
Chrome treats the CAPS ON as keydown
because it treats the on/off as press and hold, like we hold shift key, which turns on caps on behaviour and turns off when we release it. This Caps Lock button also. When you turn on Caps Lock, chrome handles the 'turn on' as a keypress
and when you 'turn off' it handles it as a keyup
. But, firefox handles everything as keydown
which doesn't make sense to me when compared to how chrome handles the same.
Solution
You should use getModifierState() to get the state of the Caps Lock
. This is supported in chrome and firefox.
Hope it helps!
$(function() {
$(window).on("keydown", function(e){
if (e.which === 20)
console.log(e.originalEvent.getModifierState('CapsLock'))
});
$(window).on("keyup", function(e) {
if (e.which === 20)
console.log(e.originalEvent.getModifierState('CapsLock'))
});
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Focus here and press 'Caps Lock'
Solution 2:
I had been looking for an answer to a very similar issue. Pranesh's answer pointed me in a direction.
In my case, I wanted to warn users that their capslock is on when they go to log in. Ultimately I settled on the following solution.
Angular Component:
export classAuthenticateComponent {
public capslockOn: boolean;
constructor() {
this.capslockOn = false;
}
publickeyup(event: KeyboardEvent): void {
if (event.key === 'CapsLock') {
// Checks / sets when the Caps Lock key is specifically pressed.this.capslockOn = (!this.capslockOn && event.getModifierState('CapsLock'));
} else {
// Checks all other conditions like the Caps Lock was on before the user// loaded the form and began typing in it.this.capslockOn = event.getModifierState('CapsLock');
}
}
}
Then I just call the keyup
function from my form:
<form ... (keyup)="keyup($event)">
Any keypress in the form - username or password - will check / set the boolean capslockOn
and I can *ngIf that to show an icon or message or both.
Thanks for the explanation Pranesh. It helped quite a bit.
Post a Comment for "Keydown Event Is Not Fired For Capslock In Mac"