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

Question

i have an input field as amount, in which currency formatting has been done. Here i enter some values and come out using tab. Now i use shift+tab and go to the same field, so in this case i want the cursor is in the last digit i mean first number from right. Instead i want the present values to be selected by default instead of keeping cursor on the last digit. Example: i typed 213.98 it got formatted to $213.98 after tab out, when i again tab in here, the cursor is next to 8, instead i want 213.98 to be selected and based on arrow keys or mouse i can move to number i wish to change. Also, when i do ctrl+Z, it has do undo all changes.

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

You can auto select all text by adding onClick="this.select();"on your input. If you want to do be able to do ctrl+z you need to add a listener for your input state like this: (input)="update($event.target.value);" then in the update method you can do this.history.push(value); . So now you should have an array called history with all different values that have been passed through.

Now to listen to ctrl+z keybind to undo a value you add (keyup.control.z)="onKeydown($event)" to the input and in the method you pop your history and set your new value to the the latest item in the history array. If you want you can also keep the previous value in a separate property and use that as a step in between.

I hope that this is kinda what you are looking for.

EDIT 1:

I do have to mention I commented out the keydown event from the currency validator to show it to you. demo

Answer 2

You can select the input by simply using the select method on your element during the focus event in the CurrencyInputDirective .

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

Now you will be able to select the whole option on clicking Shift + Tab . As for undoing all the changes using Ctrl + z , you can listen to the keydown event and remove the input accordingly. In your CurrencyInputDirective . Add a new HostListener to listen to the keydown.control.z event.

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

StackBlitz Demo