文本区域自动滚动

Question

我正在使用Ionic 3，并且有一个ion-textarea的表单。

由于我添加了fz-elastic，因此我遇到了一些奇怪的行为。这只发生在设备上，而不是在浏览器中。

我的表单中包含ion-input和两个ion-textarea。如果我将一些数据行输入ion-textarea，然后滚动到页面底部，我有一个提交按钮，它会自动向后滚动到ion-textarea，这样我就可以了无法点击按钮。

我甚至通过点击按钮上方的ion-textarea来移除ion-radio中的焦点，但它仍然会在几毫秒后滚动回到ion-textarea。< / p>

还有其他人经历过这个吗？有什么想法吗？

由于

更新

jobdetails.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title>Job Details</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div style="text-align:center">
    <ion-spinner name="dots" *ngIf="loading"></ion-spinner>

    <div *ngIf="jobModel.subCategories && jobModel.subCategories.length > 0" class="category-text animate-show">
      <p class="item-selected-row" *ngFor="let subcategory of getSelected()">
        <img class="item-stable filter-image" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" height="30" width="30" />
      </p>
    </div>
  </div>

  <form [formGroup]="jobdetailsForm" (ngSubmit)="submit()">

    <ion-item>
      <ion-label floating>Job Title *</ion-label>
      <ion-input type="text" [(ngModel)]="jobModel.jobTitle" formControlName="jobTitle" id="jobTitle"></ion-input>
    </ion-item>
    <control-messages class="error-box" [control]="jobdetailsForm.controls.jobTitle"></control-messages>
        <span class="char-left" [class.char-left-error]="jobdetailsForm.controls.jobTitle.errors != null" *ngIf="jobModel.jobTitle">{{TITLE_MAX_LENGTH-jobModel.jobTitle.length}} characters left</span>

    <ion-item>
      <ion-label floating>Job Description *</ion-label>
      <ion-textarea fz-elastic [(ngModel)]="jobModel.jobDescription" formControlName="jobDescription" id="jobDescription"></ion-textarea>
    </ion-item>
    <control-messages class="error-box" [control]="jobdetailsForm.controls.jobDescription"></control-messages>
        <span class="char-left" [class.char-left-error]="jobdetailsForm.controls.jobDescription.errors != null" *ngIf="jobModel.jobDescription">{{DESC_MAX_LENGTH-jobModel.jobDescription.length}} characters left</span>

    <ion-item>
      <ion-label floating>Further Details</ion-label>
      <ion-textarea fz-elastic [(ngModel)]="jobModel.jobDetails" formControlName="jobDetails" id="jobDetails"></ion-textarea>
    </ion-item>
    <control-messages class="error-box" [control]="jobdetailsForm.controls.jobDetails"></control-messages>
        <span class="char-left" [class.char-left-error]="jobdetailsForm.controls.jobDetails.errors != null" *ngIf="jobModel.jobDetails">{{DETAILS_MAX_LENGTH-jobModel.jobDetails.length}} characters left</span>

    <br>

    <ion-list>
      <ion-item>
        <ion-label>Drivers Licence</ion-label>
        <ion-toggle [(ngModel)]="jobModel.driversLicence" formControlName="driversLicence" id="driversLicence" ng-checked="false">Drivers Licence</ion-toggle>
      </ion-item>
    </ion-list>

    <br>

    <ion-list radio-group [(ngModel)]="jobModel.sex" formControlName="sex" id="sex">
      <ion-item>
        <ion-label>Male</ion-label>
        <ion-radio value="1"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Female</ion-label>
        <ion-radio value="2"></ion-radio>
      </ion-item>
    </ion-list>

    <br>
    <ion-buttons>
      <button ion-button class="form-button-text" type="submit" [disabled]="!jobdetailsForm.valid" block round>Next</button>
    </ion-buttons>
  </form>

<div class="footer">
  <div style="text-align:center">
    <p class="small-text-search">Please do not post any personally identifiable information, or sensitive information such as bank details and ID numbers, or any information you don’t want in the hands of others.</p>
  </div>
</div>

</ion-content>