离子2键盘在ios上将标题推出屏幕

Question

我有一个简单的聊天界面,但当我对输入文本区域进行聚焦时,键盘会推动所有内容,包括标题.内容区域的最顶层内容也隐藏了,我无法向上滚动到它们.

这仅适用于ios.

<ion-header></ion-header>
<ion-content>
  Chat Title...
  Chat Messages...
</ion-content>
<ion-footer>
   <ion-card class="chat-input">
        <textarea appAutoresize class="chat-input-textarea" rows="1" [(ngModel)]="input" placeholder="Ihre Nachricht"></textarea>
    </ion-card>
</ion-footer>

Answer 1

经过长时间的研究和阅读，这个问题在 cordova/ionic 中仍然存在，我决定自己解决这个问题。这个想法是根据键盘的高度以编程方式调整标题的高度。

1.- 在视图模板 (HTML) 的标题上附加样式指令：

<ion-header [ngStyle]="getKeyboardStyle()" >

2.- 在组件（TS）上我触发键盘的事件（显示、隐藏）和高度值：

  Observable.merge(this.nativeKeyboard.onKeyboardShow(), this.keyboard.didShow)
    .subscribe((e: any) => {
      this.keyboardHeight = e.keyboardHeight;
    });

 Observable.merge(this.nativeKeyboard.onKeyboardHide(), this.keyboard.didHide)
    .subscribe((e: any) => {
      this.keyboardHeight = e.keyboardHeight | 0;
    });
}

其中 this.keyboardHeight 是全局变量数字类型。this.keybaord 和 this.nativeKeyboard 是 cordova 插件。

3.- 最后，这是返回附加到标头 ngStyle 指令的高度的方法：

  getKeyboardStyle() {
  let style = {
    'top': this.keyboardHeight ? this.keyboardHeight + 'px' : '0px'
  }
  return style;

我希望这能有所帮助。