如何推键盘上方的窗体？

我有一个单击按钮时可见的窗体。我也有这种形式内的多个输入标签。当我输入数据到第一个输入时，它是可见的，但第二和第三个输入标签隐藏在键盘下。如何推键盘上方的窗体？

<div class="showmodal" *ngIf="formDisplay"> 
    <div class="containdiv"> 
     <ion-row class="milkColor"> 
      <ion-label style="padding-left: 5%;">Add New Contact </ion-label> 
      <ion-icon class="iconPad" name="close" (click)="cancel()" > </ion-icon> 
     </ion-row> 
     <form #form="ngForm" (ngSubmit)="logForm(form)" novalidate> 
      <ion-row> 
       <ion-col> 
        <ion-label text-right> <b>Name :</b> </ion-label> 
       </ion-col> 
       <ion-col> 
        <ion-input [value]="name" name="name" [(ngModel)]="name" type="text" placeholder="Contact Name" required></ion-input> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col> 
        <ion-label text-right> <b>Occupation :</b> </ion-label> 
       </ion-col> 
       <ion-col> 
         <ion-input [value]="service" name="service" [(ngModel)]="service" type="text" placeholder="Occupation" required></ion-input> 
       </ion-col> 
      </ion-row> 

      <ion-row> 
       <ion-col> 
        <ion-label text-right > <b>Contact No. :</b> </ion-label> 
       </ion-col> 
       <ion-col> 
        <ion-input [value]="number" name="number" [(ngModel)]="number" type="number" placeholder="Number" required></ion-input> 
       </ion-col> 
      </ion-row> 
      <ion-row > 
       <ion-col text-center> 
        <button [disabled]=!form.valid class="textLower" ion-button type="submit" value="Submit" >Submit</button>     
       </ion-col> 
      </ion-row> 
     </form> 
    </div> 
</div>

，并在我的CSS

.showmodal { 
    position: fixed; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(23, 22, 22, 0.2); 
    z-index: 10; 
    left: 0px; 
}  
.showmodal .containdiv { 
    background: white; 
    margin-top:52%; 
    min-height:30%; 
    overflow:auto; 
    margin: 150px 20px 0 17px; 
}

我需要所有3个输入时的形式到达是可见的，如果我有3个以上的输入标签，我应该能滚动输入列表

有人能帮助我吗？

来源

2017-09-15 Yokesh Varadhan

将投入window.scrollBy（0，300）上的按钮，点击帮助？ – Vega

你能给我一些示例如何做到这一点 –

你在哪里设置formDisplay到true展现形式，添加scroll这样形式的内容就上去了一点，输入将显示在屏幕上更高，而不是由键盘隐藏按钮（点击）事件。东西，如下：

HTML

<button ....(click)="displayForm()"...>Display Form</form>

打字稿

displayForm(){ 
... 
this.displayForm=true; 
window.scroll(0, 100); // or an other number of pixels enough to display 
... 
}

来源

2017-09-15 07:22:44 Vega

尝试过，但没有使用该div保持其位置 –

你有位置：固定在该div？ – Vega

我删除并尝试但仍然不动 –

如何推键盘上方的窗体？

回答

相关问题