Question

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

Answer 1

编写指令并添加一个监听器。将它添加到组件的主包装div中，因此组件将获得发出。一旦收到事件更改，就会触发链接到label标签的属性的状态。它将有助于隐藏和显示* ngIf，条件是你的听众的响应（通过@Output到组件）。

以下显示动态消息：

HTML：

 D/MainActivity: onCreate
 D/MainActivity: charSequence:a //entered manually
 D/MainActivity: charSequence:a // triggered on orientation change
 D/MainActivity: onDestroy
 D/MainActivity: onCreate
 D/MainActivity: onDestroy
 D/MainActivity: onCreate
 D/MainActivity: onDestroy
 D/MainActivity: onCreate
 D/MainActivity: onDestroy // no callback so far
 D/MainActivity: onCreate
 D/MainActivity: charSequence:ba // entered manyally
 D/MainActivity: onDestroy
 D/MainActivity: onCreate
 D/MainActivity: charSequence:ba // when came back to original "ba" orientation
 D/MainActivity: onDestroy
 D/MainActivity: onCreate

指令：

<div (capsLock)="capsOn=$event">
  <input type="text"  >
  <label *ngIf="capsOn">Caps Locked</label>
</div>

DEMO

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

}

Answer 3

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

虽然有一些库可以做到这一点，但值得查看capsLock（NPM，GitHub）

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

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

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

检测并警告用户有关大写锁定的信息

3 个答案: