如何在angular8中制表后使用shift + tab时选择整个值

Question

我有一个输入字段作为金额，其中货币格式已完成。在这里我输入一些值并使用选项卡出来。现在我使用 shift+tab 并转到同一个字段，所以在这种情况下，我希望光标位于最后一位，我的意思是从右边开始的第一个数字。相反，我希望默认选择当前值，而不是将光标保持在最后一位上。示例：我键入213.98它被格式化为$213.98在 tab out 之后，当我在这里再次 tab 时，光标在 8 旁边，而不是我想213.98被选中，并且基于箭头键或鼠标我可以移动到我想要更改的数字。此外，当我执行 ctrl+Z 时，它会撤消所有更改。HTML：<input type="text" class="form-control" placeholder="Amount in dolars"            formControlName="amount" autocomplete="off" currencyInput maxDigits="9" [ngClass]="{ 'is-invalid': eoInfo.amount.dirty  && eoInfo.amount.invalid }">TS：this.eoInfoForm = this.FB.group({      amount: ['', Validators.required],    });

Answer 1

onClick="this.select();"您可以通过添加输入来自动选择所有文本。如果您希望能够执行 ctrl+z 您需要为您的输入状态添加一个侦听器，如下所示：(input)="update($event.target.value);"然后在 update 方法中您可以执行this.history.push(value);. 因此，现在您应该有一个名为 history 的数组，其中包含已传递的所有不同值。

现在听 ctrl+z keybind 撤消添加(keyup.control.z)="onKeydown($event)"到输入的值，并在弹出历史记录并将新值设置为历史记录数组中的最新项目的方法中。如果您愿意，您还可以将先前的值保留在单独的属性中，并将其用作中间的步骤。

我希望这有点像你正在寻找的东西。

编辑1：

我不得不提一下，我从货币验证器中注释掉了 keydown 事件，以便向您展示。 演示

Answer 2

您可以select在.focusCurrencyInputDirective

@HostListener("focus", ["$event.target.value"])

onFocus(value) {

    // on focus remove currency formatting

    this.el.value = value.replace(/[^0-9.]+/g, '')

    this.el.select();

}

现在您将能够在单击Shift+时选择整个选项Tab。至于使用Ctrl+撤消所有更改z，您可以监听keydown事件并相应地删除输入。在你的CurrencyInputDirective. 添加一个新HostListener的来监听keydown.control.z事件。

@HostListener("keydown.control.z", ["$event.target.value"])

onUndo(value) {

    this.el.value = '';

}