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

如何使用 typescript 中的工具提示样式(或不使用)以大写锁定打开或关闭时检测并警告用户( Angular 4.2.2)？可能有一些按键事件，或者像JS中的toUpperCase()一样。

最佳答案

编写指令并添加监听器。将其添加到组件的主包装div中，这样组件将获得发射。它收到事件更改后，立即触发链接到标签标签的属性的状态。这将有助于隐藏和显示* 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

关于javascript - 检测并警告用户有关大写锁定的信息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45035330/