How to select text when ion-input clicked

I have some ion-input, and when I clik on one, I want the text selected, and when I press next on the keyboard and select the next ion-input, I want the same behavior(the text selected) with the keyboard open. Any idea?

I want to do something like the document.getElementById("txtInput").select();, but called everytime I click on the ion-input.

I’m not 100% sure this will work in ion-input, but try this:

<ion-input (focus)="this.select()">

You might have to play around with it a bit because it’s an ion-input and not a standard input. But that general idea should work. Use the Angular focus event and the HTMLInputElement select() method. You might need to create a method in the ts file, and have the focus event trigger that method.

Doesn’t work the (focus)="this.select()", (click)="this.select()", #myInput (click)="myInput.select()".

The only how works is the (click)="$event.target.select()", but you need to double click, or click above the text to select it. And it don’t work on devices. :sob:

1 Like

I know that this is old post , But I want to add the solution for this question so that any one search can find it.
the solution is to add click lsitener to your ion-input and implement it as follow

onInputClick(nativeEl){

nativeEl.target.autofocus=true;

nativeEl.target.select();

}
<ion-input (click)=“onInputClick($event)”>