如何在Angular指令初始化时获取Caps Lock大写锁定状态

首先明确结论：仅靠纯Angular无用户交互主动读取页面初始化时的Caps Lock状态无法实现，该限制来自浏览器安全策略，与Angular框架无关：浏览器未提供脱离用户交互事件主动查询系统修饰键状态的API，getModifierState 方法仅能在用户触发的事件（键盘、鼠标、焦点等事件）上下文内拿到正确结果。

你可以采用交互预检测的优化方案，几乎可以覆盖全部实际使用场景：监听用户进入页面后首次触发的交互事件（点击、输入框聚焦等），在用户按下键盘前就提前获取Caps Lock状态，效果接近初始化即获取。

优化后的指令代码参考：

import { Directive, EventEmitter, HostListener, OnInit, Output, ElementRef } from '@angular/core';

@Directive({
    selector: '[capsLock]',
})
export class CapslockDirective implements OnInit{
    @Output('capsLock') capsLock: EventEmitter<boolean> = new EventEmitter<boolean>();
    capsOn!: boolean;
    // 标记是否已经完成首次状态检测
    private hasDetected = false;

    constructor(private el: ElementRef) {}

    ngOnInit(): void {
      // 此处受浏览器限制，无法直接无交互读取Caps Lock状态
    }

    // 监听输入框聚焦事件（如果指令绑定在输入框上，该事件触发时机更早）
    @HostListener('focus', ['$event'])
    onFocus(event: FocusEvent): void {
        if (this.hasDetected) return;
        this.detectCapsState(event);
    }

    // 监听鼠标点击事件，覆盖用户点击页面任意位置的场景
    @HostListener('window:mousedown', ['$event'])
    onMouseDown(event: MouseEvent): void {
        if (this.hasDetected) return;
        this.detectCapsState(event);
    }

    @HostListener('window:keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        this.detectCapsState(event);
    }

    @HostListener('window:keyup', ['$event'])
    onKeyUp(event: KeyboardEvent): void {
        this.detectCapsState(event);
    }

    // 封装统一的状态检测逻辑
    private detectCapsState(event: { getModifierState?: (key: string) => boolean }): void {
        if (!event.getModifierState) return;
        this.capsOn = event.getModifierState('CapsLock');
        this.capsLock.emit(this.capsOn);
        this.hasDetected = true;
    }
}

该方案的适用场景：

• 只要用户和页面产生任意交互（点击、聚焦输入框、按键盘），就会立刻拿到当前Caps Lock状态
• 针对表单输入场景，用户点击输入框的瞬间就会触发状态检测，不用等用户输入第一个字符就能给出Caps Lock开启提示

内容的提问来源于stack exchange，提问作者user11611614