Question

当我聚焦输入表单时，该表单在屏幕中向上移动。

这是用于在Ionic 3上移动的应用程序。

<ion-content>
<div class="bg" [hidden]="Keyboard.isOpen()"></div>
<div class="bg2"></div>
<p (click)=goToRegisterPage()>Sign up!</p>
<div class="form">
  <h3>Sign in</h3>
  <hr class="hr">
  <ion-item>
      <ion-label color="dark" floating>email</ion-label>
      <ion-input></ion-input>
  </ion-item>
  <ion-item>
      <ion-label color="dark" floating>password</ion-label>
      <ion-input></ion-input>
  </ion-item>  
  <button class="button-form">-> CONTINUE</button>
  <div class="separator-form">
    <hr>
    <h6>or</h6>
    <hr>
  </div>
  <img class="img-form" src="../../assets/imgs/icon -G+.png"/>
</div>
</ion-content>

我希望当我聚焦或键盘向上移动时，表格不会移动。

Answer 1

您需要删除以下行：

<div class="bg" [hidden]="Keyboard.isOpen()"></div>

[hidden]属性作用于该DIV的css属性 display：block / none 。因此，当键盘打开时，即表示输入具有焦点，该div就会消失。

现在，如果您希望该Div仍然消失而不移动页面的其他部分，则需要执行以下操作：

<div class="bg" [ngStyle]="{'visibility' : Keyboard.isOpen() ? 'hidden' : 'visible'}"></div>

重点突出时，表单输入会向上移动

1 个答案: