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

Question

我在我的Angular应用程序中使用ngx-material-keyboard。 我注意到shift key在点击/点击时表现得很奇怪：

• 预期：在将小写字母表示形式更改为大写后，单击其中一个大写字母时，键盘会自动切换回小写
• 观察：在将小写字母表示形式更改为大写后，单击其中一个大写字母时，键盘保持大写（移位键的行为与caps lock key相同）

我的期望来自手机屏幕键盘（例如聊天应用程序）。我的期望是否有效并且我的愤怒是否合理？

在这里自己重现：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;
    }
}

在keyboard-key-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);
    }
}