检测并警告用户有关大写锁定的信息

Question

如何在大写锁定打开时检测和警告用户(或者没有)打字稿中的工具提示样式(角度4.2.2)？也许有一些keyup事件,或者像toUpperCase()JS一样.

Answer 1

编写指令并添加一个监听器.将它添加到组件的主包装器div中,因此组件将获得发射.一旦收到事件更改,就会触发链接到label标签的属性的状态.它将有助于隐藏和显示*ngIf,条件是你的听众的响应(通过@Output到组件).

以下显示动态消息:

HTML:

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

指示:

@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

在当前窗口上单击、按下键盘和按下键盘时检测 CapsLock 。无需在 html 文档中添加任何事件

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

}