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.
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)”>