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

Question

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

Answer 1

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

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

您可以使用 observable 来检查大写锁定是否已启用，然后您是否可以自定义内容

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

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

Answer 2

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

Answer 3

在当前 window 上的 单击、键盘向上和向下 检测 CapsLock。无需在 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;
 }
}

}

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

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

Detect and warn users about caps lock is on

javascript

capslock

typescript

angular