Get caps lock state on directive init

Question

I would like to get the caps lock state when initializing a directive. Currently the directive detects changes after pressing the key, but what about the situation when the user enters the page with caps lock already active? Currently, the directive code looks like this (thanks to Vega's answer):

import { Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core';

@Directive({
    selector: '[capsLock]',
})
export class CapslockDirective implements OnInit{
    @Output('capsLock') capsLock: EventEmitter<boolean> = new EventEmitter<boolean>();
    capsOn!: boolean;

    ngOnInit(): void {
      // detect caps lock state here
    }

    @HostListener('window:keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        this.capsOn = event.getModifierState && event.getModifierState('CapsLock');
        this.capsLock.emit(this.capsOn);
    }
    @HostListener('window:keyup', ['$event'])
    onKeyUp(event: KeyboardEvent): void {
        this.capsOn = event.getModifierState && event.getModifierState('CapsLock');
        this.capsLock.emit(this.capsOn);
    }
}

Is it even possible in pure Angular?

You can create a custom element for the keyboard and dispatch it. you can refer [this](https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically) link if it is helpful. — Apoorva Chikara, Sep 01 '21 at 09:52

Pilpo · Accepted Answer · 2021-09-01T09:28:46.803

Afaik, you can't check key state in JS and I don't remember seen this in TS either. An other solution, on your parent component, create a boolean that is updated when capsLock is down/up and give it to your directive as @input:

isCapsOn = false;

@HostListener('document:keydown', ['$event']) 
onKeyDown($event:KeyboardEvent):void {
   ... detect if caps lock has been pressed
   ... if so, this.isCapsOn = true;
};

@HostListener('document:keyup', ['$event']) 
onKeyUp($event:KeyboardEvent):void {
   ... detect if caps lock has been released
   ... if so, this.isCapsOn = false;
};

And in your parent html:

<div capsLock [capsOn]="isCapsOn" (capsLock)="yourMethod"...

And in your directive:

export class CapslockDirective implements OnInit{
    @Output('capsLock') capsLock: EventEmitter<boolean> = new EventEmitter<boolean>();
    @Intput capsOn: boolean;

Get caps lock state on directive init

1 Answers1