大写锁定指令

在密码输入框中，您可能需要显示大写锁定是否开启。为了更便捷地实现这一功能，您可以使用 @abp/ng.core 包提供的 TrackCapsLockDirective。

快速开始

TrackCapsLockDirective 是一个独立指令。若要在 HTML 模板中使用该指令，请先将其导入到相关组件中。该指令的选择器为 abpCapsLock。通过向元素添加 abpCapsLock 事件，您可以追踪大写锁定的状态，并据此向用户发出警告。

参考以下使用示例：

import { TrackCapsLockDirective } from '@abp/ng.core'

@Component({
  selector: 'sample-component',
  template: `
    <div class="d-flex flex-column">
      <label>密码</label>
      <input (abpCapsLock)="capsLock = $event"/>
      @if (capslock) {
        <i>图标</i>
      }
    </div>
  `,
  imports: [TrackCapsLockDirective]
})
export class SampleComponent{
  capsLock = false;
}

示例中已将 abpCapsLock 事件添加到 <input> 元素。按下大写锁定键即可激活 TrackCapsLockDirective。

效果展示：

按下大写锁定键可查看大写锁定图标：