Detect and warn users about caps lock is on

Question

How to implement to detecting and warning users when caps lock is on with (or not) tooltip style in typescript (angular 4.2.2)?? Maybe with some keyup events, or like toUpperCase() in JS.

Answer 1

Write a directive and add a listener. Add it to your component's main wrapper div, so component would get the emits. As soon it receives the event change, trigger the state of a property linked to a label tag. It will help to hide and show with *ngIf, the condition being the response from your listener (via an @Output to the component).

The following displays a message dynamically:

HTML:

<div (capsLock)="capsOn=$event">
  <input type="text"  >
  <label *ngIf="capsOn">Caps Locked</label>
</div>

Directive:

@Directive({ selector: '[capsLock]' })
export class TrackCapsDirective {
  @Output('capsLock') capsLock = new EventEmitter<Boolean>();

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

DEMO

Answer 2

Detect CapsLock on click, keyup and keydown on current window. No need to add any event in html doc

import { Component, OnInit, HostListener } from '@angular/core';

export class LoginComponent implements OnInit {

constructor(){}

ngOnInit() {}

@HostListener('window:click', ['$event']) onClick(event){
 if (event.getModifierState && event.getModifierState('CapsLock')) {
   this.capslockOn = true;
  } else {
   this.capslockOn = false;
  }
 }

@HostListener('window:keydown', ['$event'])
onKeyDown(event){
if (event.getModifierState && event.getModifierState('CapsLock')) {
  this.capslockOn = true;
  } else {
   this.capslockOn = false;
  }
}

@HostListener('window:keyup', ['$event'])
 onKeyUp(event){
 if (event.getModifierState && event.getModifierState('CapsLock')) {
  this.capslockOn = true;
 } else {
  this.capslockOn = false;
 }
}

}

Answer 3

I don't think Angular can do this out of the box (AngularJS can).

There are a few libraries that can do this though, it would be worth checking out capsLock (NPM, GitHub)

You are able to use an observable to check if the caps lock is enabled and then do you custom stuff

capsLock.observe(function (result) {
    // Do stuff
});

Here is the example from the Github readme: https://rawgit.com/aaditmshah/capsLock/master/demo.html

Answer 4

@HostListener('window:click', ['$event'])
@HostListener('window:keydown', ['$event'])
@HostListener('window:keyup', ['$event'])
onCapsCheck(event: MouseEvent | KeyboardEvent) {
    this.capsOn = !!(event.getModifierState && event.getModifierState('CapsLock'));
}