Question

我是Web开发的新手，我需要使输入字段的onclick可编辑，并且输入字段设置为readonly属性。我正在使用ionic4-angular4。

 <ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic" (click)="change()">
  <img src="assets/img/min.jpg">
</ion-avatar>
<ion-grid>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-input placeholder="Profile Name" id="input" readOnly></ion-input>
        <span item-end>
          <ion-icon size="small" src="assets/profile/edit.svg" slot="icon-only" (click)="edit()"></ion-icon>
        </span>
      </ion-item>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-input placeholder="User ID " readonly></ion-input>
        <span item-end>
          <ion-icon size="small" src="assets/profile/edit.svg" slot="icon-only" id="edit"></ion-icon>
        </span>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

您可以在输入字段中使用[readonly]作为条件：并且，根据您尝试进行onclick的操作而定，除非是用于按钮，否则这没有任何意义。也许双击？

HTML

 <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi" 
      [readonly]="isReadOnly" (dblclick)="enableEdit()">
  </mat-form-field>

JS

export class InputOverviewExample {
  test: isReadOnly= true;

  enable(){
  this. isReadOnly= false;
}
}

Onclick编辑按钮使输入字段可编辑

1 个答案: