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

Posted 2023-03-17

【中文标题】ionic 2键盘在ios上将标题推出屏幕

【英文标题】：ionic 2 keyboard pushes header out of screen on ios

【发布时间】：2017-10-01 02:27:12

【问题描述】：

我有一个简单的聊天界面，但是当我关注输入文本区域时，键盘会将所有内容向上推，包括标题。 内容区域的最顶层内容也被隐藏，我无法向上滚动。

这仅适用于 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>

【问题讨论】：

您解决了这个问题吗？我仍然可以重现它。

不，还没有解决...

【参考方案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;

我希望这会有所帮助。

【参考方案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

【参考方案3】：

我在 iPhoneX 上遇到了这个问题，在尝试了一些不同的解决方法后，我发现在 javascript 文件中添加一个 eventListener 解决了这个问题。

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

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