离子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(上i触发键盘事件(显示，hide(和高度值：

  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;
    });
}

where this.keyboardHeight是全局变量数字类型。this.keybaord和this.nativekeyboard是Cordova插件。

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

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

我希望这会有所帮助。

Answer 2

这个问题似乎是由不弃用的离子 - plugin-kekeboard引起的。卸下该插件，然后使用Cordova-Plugin-Ionic-键盘。

请注意，@ionic-native/keyboard似乎当前与cordova-plugin-ionic-keyboard一起使用，因此，如果您需要在代码中访问键盘插件，则可能需要使用这些解决方法(您无需考虑即可在此解决问题问题(：https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-369568584https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-372593829

Answer 3

我在iPhone X上遇到了这个问题，在尝试了一些不同的工作之后，我发现将EventListener添加到JavaScript文件中。

确保您的项目中安装了Ionic-Plugin-keyboard

document.addEventListener('deviceready', function(e){
    window.addEventListener('native.keyboardshow', function () {
        cordova.plugins.Keyboard.disableScroll(true);
    });
});