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;

我希望这可以提供帮助。

Answer 2

问题似乎是由弃用的ionic-plugin-keyboard造成的。删除该插件并改为使用cordova-plugin-ionic-keyboard。

请注意，@ionic-native/keyboard目前似乎不适用于cordova-plugin-ionic-keyboard，因此如果您需要在代码中访问键盘插件，您可能需要使用这些解决方法（您不需要思考以解决这个问题中的问题）： https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-369568584 https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-372593829

Answer 3

我在iPhoneX上遇到了这个问题，并尝试了几种解决方法后，发现在JavaScript文件中添加一个eventListener可以解决该问题。

确保在项目中安装了ionic-plugin-keyboard

onChange

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

3 个答案: