Как сделать все значения, которые будут выбраны, когда shift + tab используется после tab out в angular8

Question

У меня есть поле ввода в качестве суммы, в которой было выполнено форматирование валюты. Здесь я ввожу некоторые значения и получаю вкладку. Теперь я использую Shift + Tab и go для того же поля, поэтому в этом случае я хочу, чтобы курсор был в последнем ди git Я имею в виду первое число справа. Вместо этого я хочу, чтобы текущие значения были выбраны по умолчанию вместо того, чтобы держать курсор на последней ди git. Пример: я набрал 213.98 после форматирования он отформатировался в $213.98, когда я снова вкладываю здесь, курсор находится рядом с 8, вместо этого я хочу, чтобы был выбран 213.98 и на основе клавиш со стрелками или мыши, я могу перейти к номеру я sh, чтобы изменить. Кроме того, когда я нажимаю 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: DEMO

Answer 1

Вы можете выбрать вход, просто используя метод select для вашего элемента во время события focus в CurrencyInputDirective.

@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 Demo

Answer 2

Вы можете автоматически выбрать весь текст, добавив onClick="this.select();" к вашему вводу. Если вы хотите иметь возможность делать Ctrl + Z, вам нужно добавить прослушиватель для вашего состояния ввода, например: (input)="update($event.target.value);", затем в методе обновления вы можете сделать this.history.push(value);. Так что теперь у вас должен быть массив с именем history, в котором были пропущены все различные значения.

Теперь, чтобы прослушать сочетание клавиш ctrl + z, чтобы отменить значение, добавленное вами (keyup.control.z)="onKeydown($event)" к входу и в методе, который вы используете. вытолкните свою историю и установите новое значение для самого последнего элемента в массиве истории. Если вы хотите, вы также можете сохранить предыдущее значение в отдельном свойстве и использовать его как шаг между ними.

Я надеюсь, что это то, что вы ищете.

РЕДАКТИРОВАТЬ 1:

Я должен упомянуть, что закомментировал событие keydown от валидатора валюты, чтобы показать его вам. демо