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

Question

我有一个输入字段作为金额，其中货币格式已完成。 在这里我输入一些值并使用选项卡出来。 现在我使用 shift+tab 并转到同一字段，因此在这种情况下，我希望光标位于最后一位数字，我的意思是从右数第一个数字。 相反，我希望默认选择当前值，而不是将光标保持在最后一位。 示例：我输入213.98它在标签退出后被格式化为$213.98 ，当我再次在这里标签时，光标在 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);" 然后在更新方法中你可以做this.history.push(value); . 所以现在你应该有一个名为 history 的数组，其中包含所有已传递的不同值。

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

我希望这就是你正在寻找的。

编辑 1：

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

Answer 2

在CurrencyInputDirective中的focus事件期间，您可以通过简单地在您的元素上使用select方法来选择输入。

@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 = '';
}

StackBlitz 演示