Question

我正在Angular应用中使用ngx-material-keyboard。
我注意到，{/ {3}}的点击/点击行为很奇怪：

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

我的期望来自手机上的屏幕键盘（例如在聊天应用程序中）。我的期望有效，并且我的激怒有道理吗？

在此处自己复制：caps lock key

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

任何人都知道如何解决此问题？（我分叉了仓库，因此可以更改issue，但是不幸的是，我无法弄清楚字母大小写切换是如何完成的，以及如何使移位处理程序仅单击一次即可切换到大写字母，而不是永久。）

以下是我认为很有趣的代码部分：

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

Shift键的行为类似于ngx-material-keyboard中的Caps Lock键

1 个答案: