检测并警告用户有关大写锁定的信息 [英] Detect and warn users about caps lock is on

问题描述

如何使用打字稿中的工具提示样式(或不使用)以大写锁定打开或关闭时检测并警告用户(角度4.2.2)?也许有一些按键事件，或者像JS中的toUpperCase().

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.

推荐答案

编写指令并添加侦听器.将其添加到组件的主包装div中，这样组件将获得发射.它收到事件更改后，立即触发链接到标签标签的属性的状态.这将有助于隐藏和显示* ngIf，条件是来自侦听器的响应(通过对组件的@Output输出).

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({ 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);
  }
}

演示

这篇关于检测并警告用户有关大写锁定的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！