Shift 键的行为类似于 ngx-material-keyboard 中的大写锁定键

Question

我在 Angular 应用程序中使用 ngx-material-keyboard。
我注意到 shift key 表现得很奇怪，当 tapped/clicked:

预期：将字母的小写表示更改为大写后，单击其中一个大写字母，键盘自动切换回为小写
观察到：将字母的小写表示更改为大写后，单击其中一个大写字母时，键盘保持为大写（shift 键的行为与 caps lock key)

我的期望来自 phone 上的屏幕键盘（例如在聊天应用程序中）。我的期望是否有效，我的刺激是否合理？

在这里自己转载：ngx-material-keyboard demo

据我所知，没有人创建 issue，我觉得这很奇怪，所以我首先在这里问（而且似乎也没有人在 SO 中解决它）。

有人知道如何解决这个问题吗？（我分叉了回购协议，因此我可以更改 code，但不幸的是，我无法弄清楚字母大小写切换是如何完成的，以及如何让移位处理程序仅通过一次单击而不是切换到大写永久。）

以下是我认为相关的代码部分：

在keyboard.compontents.ts中：

public onShiftClick(): void {
    this.modifier = MatKeyboardComponent.invertShiftModifier(this.modifier);
    this.shiftClick.next();
}

private static invertShiftModifier(modifier: KeyboardModifier): KeyboardModifier {
    switch (modifier) {
        case KeyboardModifier.None:
            return KeyboardModifier.Shift;

        case KeyboardModifier.Alt:
            return KeyboardModifier.ShiftAlt;

        case KeyboardModifier.ShiftAlt:
            return KeyboardModifier.Alt;

        case KeyboardModifier.Shift:
            return KeyboardModifier.None;
    }
}

并且在键盘键-component.ts:

public onClick(event: MouseEvent): void {
[...]

// TODO: if current modifier is KeyboardModifier.Shift
// do the invert
}

Answer 1

我自己找到了可行的解决方案。
onClick() 函数已经提供了 this.genericClick.emit(event)。单击一个键后，此发射器可用于重置班次。如果大写锁定处于活动状态，该解决方案也可以正常工作。

在 keyboard.component.html 中，添加 genericClick:

<vwlmz-keyboard-key class="mat-keyboard-col"
    [...]
    (enterClick)="onEnterClick()"
    (genericClick)="onKeyClick()" // add this line
    (capsClick)="onCapsClick()"
    (altClick)="onAltClick()"
    (shiftClick)="onShiftClick()"></vwlmz-keyboard-key>

在keyboard.component.ts中添加：

public enterClick: EventEmitter<void> = new EventEmitter<void>();

public onKeyClick(): void {
    this.genericClick.next();

    // reset shift after clicking a key
    if (this.modifier === KeyboardModifier.Shift) {
        this.modifier = MatKeyboardComponent.invertShiftModifier(KeyboardModifier.Shift);
    }
}

Shift 键的行为类似于 ngx-material-keyboard 中的大写锁定键

Shift key behaves like caps lock key in ngx-material-keyboard

on-screen-keyboard

typescript

custom-keyboard

angular-material

angular