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

Posted 2023-03-16

【中文标题】检测并警告用户大写锁定已打开

【英文标题】：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 不同

【参考方案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'));