Onclick edit button select all text in the input field

@premktr wrote:

initially, my input field will be in read-only by clicking on the edit button it should make readonly=false and select all text at the same time.

  <ion-item  lines="none">
            <ion-input placeholder="Profile Name" id="input"  [readonly]="isReadOnly" (focusout) ="out_profile()"></ion-input>
            <ion-buttons class="ion-float-right">
              <ion-button  color="light" (click)="enable_name()"   class="edit">
            <!-- <span item-end> -->
              <ion-icon size="small" src="assets/profile/edit.svg" slot="icon-only"></ion-icon>
            <!-- </span> -->
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item  lines="none">
            <ion-input placeholder="User ID "  [readonly]="isReadOnly"></ion-input>
            <ion-buttons class="ion-float-right">
              <ion-button color="light" (click)="enable_id()"  (focusout) ="out_id()" class="edit">
            <!-- <span item-end> -->
              <ion-icon size="small" src="assets/profile/edit.svg" slot="icon-only"></ion-icon>
            <!-- </span> -->
              </ion-button>
            </ion-buttons>
          </ion-item>

enable_name(){
  this. isReadOnly = false;
  console.log('works');
  // let a=document.getElementsByClassName('edit');
  // a.focus();
  // a.select();
// tslint:disable-next-line: no-unused-expression
  document.getElementsByClassName('edit').select() as HTMLInputElement;
  
}
enable_id(){
  this. isReadOnly = false;
  // console.log('works');


  
}

Posts: 1

Participants: 1

Read full topic