javascript - Detect and warn users about caps lock is on - Stack Overflow

admin管理员组

文章数量:1221409

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.

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.

• javascript
• angular
• typescript
• capslock

Share Improve this question Follow edited Apr 16, 2020 at 5:45 Vega 28.7k2828 gold badges120120 silver badges145145 bronze badges asked Jul 11, 2017 at 12:59 Eduard ArevshatyanEduard Arevshatyan 67855 gold badges1919 silver badges3434 bronze badges 2

• Possible duplicate of How do you tell if caps lock is on using JavaScript? – Den Isahac Commented Jul 11, 2017 at 13:11
• 1 @Den Isahac I think thats different from JS and TS – Eduard Arevshatyan Commented Jul 24, 2017 at 12:59

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 11

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

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;
 }
}

}

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

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

本文标签： javascriptDetect and warn users about caps lock is onStack Overflow