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

Question

我有一个金额输入字段，其中已完成货币格式设置。在这里我输入一些值并使用选项卡出来。现在我使用 shift+tab 并转到相同的字段，所以在这种情况下，我希望光标位于最后一位，我的意思是从右边开始的第一个数字。相反，我希望默认选择当前值，而不是将光标保持在最后一位数字上。示例：我输入 213.98 它在 Tab 退出后被格式化为 3.98，当我再次在这里 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],
    });

演示：DEMO

Answer 1

您可以通过在输入中添加 onClick="this.select();" 来自动 select 所有文本。如果你想做能够做 ctrl+z 你需要像这样为你的输入状态添加一个监听器：(input)="update($event.target.value);" 然后在更新方法中你可以做 this.history.push(value);。所以现在你应该有一个名为 history 的数组，其中包含已传递的所有不同值。

现在听 ctrl+z 键绑定撤消您将 (keyup.control.z)="onKeydown($event)" 添加到输入的值，并在方法中弹出历史并将新值设置为历史数组中的最新项。如果你愿意，你也可以将之前的值保存在一个单独的属性中，并将其用作中间的一个步骤。

我希望这就是您要找的东西。

编辑 1：

我必须提到我注释掉了货币验证器的 keydown 事件以向您展示。 demo

Answer 2

在 CurrencyInputDirective.

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

@HostListener("focus", ["$event.target.value"])
onFocus(value) {
    // on focus remove currency formatting
    this.el.value = value.replace(/[^0-9.]+/g, '')
    this.el.select();
}

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

@HostListener("keydown.control.z", ["$event.target.value"])
onUndo(value) {
    this.el.value = '';
}

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

How to make the entire values to be selected when shift+tab is used after tab out in angular8

javascript

tabs

angular

编辑 1：

StackBlitz Demo