cordova - ionic 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.- 在 View 模板 (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;

希望对您有所帮助。