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

Question

如何在TypeScript（Angular 4.2.2）中实现检测和警告用户是否开启大写锁定，并使用（或不使用）工具提示样式？也许可以使用一些keyup事件，或者像JS中的toUpperCase()一样。

- Eduard Arevshatyan

---

可能是如何使用JavaScript判断大写锁定是否打开？的重复问题。 - Den Isahac

@Den Isahac 我认为这与 JS 和 TS 不同。 - Eduard Arevshatyan

Answer 1

编写指令并添加监听器。将其添加到组件的主包装 div 中，以便组件可以接收到 emits。一旦它接收到事件更改，就会触发与标签标记链接的属性状态。它将有助于使用 *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);
  }
}

演示

- Vega

---

我想要在大写锁定时显示消息，也许可以不使用任何样式来实现？ - Eduard Arevshatyan

为什么我们要包含这个 event.getModifierState？ - Suraj Jain

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

}

- Gopal

---

当字段被触摸时，是否可能仅显示消息？ - CptDayDreamer

目前来看，仅使用HTML/JS无法在智能手机上进行检测。 - Gopal

出现错误：重复的函数实现。ts（2393） - Rohit Gaidhane

Answer 3

我认为Angular无法直接实现这个功能（AngularJS可以）。

不过有一些库可以实现，建议查看capsLock（NPM, GitHub）

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

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

这是来自Github readme的示例：https://rawgit.com/aaditmshah/capsLock/master/demo.html

- Jamie Rees

---

也许是检测 KeyChar？不是吗？ - Eduard Arevshatyan

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

- Adrian