检测并警告用户大写锁定已打开答案

【问题标题】：Detect and warn users about caps lock is on检测并警告用户大写锁定已打开
【发布时间】：2017-12-15 13:29:51
【问题描述】：

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

【问题讨论】：

How do you tell if caps lock is on using JavaScript?的可能重复
@Den Isahac 我认为这与 JS 和 TS 不同

标签： javascript angular typescript capslock

【解决方案1】：

编写指令并添加侦听器。将它添加到组件的主包装器 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

【讨论】：

我会在大写锁定打开时显示消息，也许没有任何样式？
为什么要包含这个 event.getModifierState

【解决方案2】：

在当前窗口上单击、上键和下键检测大写锁定。无需在 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;
 }
}

}

【讨论】：

是否可以只在字段被触摸时显示消息？
截至目前，仅使用 HTML/JS 无法在智能手机中检测到
得到这个错误 Duplicate function implementation.ts(2393)

【解决方案3】：

我认为 Angular 不能开箱即用（AngularJS 可以）。

虽然有一些库可以做到这一点，但值得一试 capsLock (NPM, GitHub)

您可以使用 observable 来检查是否启用了大写锁定，然后进行自定义操作

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

这是 Github 自述文件中的示例：https://rawgit.com/aaditmshah/capsLock/master/demo.html

【讨论】：

可能检测到keychar？没有？

【解决方案4】：

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

【讨论】：