Ionic：键盘与 iOS 11 上的焦点文本输入重叠答案

【问题标题】：Ionic: Keyboard overlaps a focused text input on iOS 11Ionic：键盘与 iOS 11 上的焦点文本输入重叠
【发布时间】：2018-06-05 12:41:22
【问题描述】：

问题

当我单击模式中的文本输入时，键盘会与文本输入重叠。此问题是在 iPhone SE (iOS 11) 设备上测试时发现的。

我查看了几个线程并试图自己弄清楚，但我意识到我目前的问题一直是 Ionic 开发人员的长期问题。

这些是我的问题的相关链接。我已经尝试了下面链接中给出的解决方案，但没有一个适用于我的代码。

版本信息

cli 包：(/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

@ionic/app-scripts : 3.1.4
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

系统：

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

预期行为

当用户键入一些消息时，离子输入应保持在键盘正上方的位置。

实际行为

app.component.ts

我已将keyboard.disableScroll(true); 包含在platform.ready() 中，以防止导航栏崩溃问题。如果没有这行代码，键盘可以很好地处理输入文本。但它将整个内容推到顶部，包括导航栏，因此前几条消息似乎被隐藏了。

有什么想法吗？

更新

我不确定我解决问题的方法是否是最好的解决方案，但现在，我将内容和页脚的 margin-bottom 替换为文本区域的初始高度和键盘高度的总和。

如果您有更好的解决方案，请随时将其作为答案。

这是最终结果。

【问题讨论】：

您是否安装了最新的cordova-plugin-keyboard？
我检查了我的 package.json 文件，我现在使用的是 ionic-plugin-keyboard 2.2.1。
我想通了。
我也遇到了同样的问题，哪个ionic-plugin-keyboard 2.2.1.你的问题解决了吗？
抱歉回复晚了。我刚刚更新了帖子并发布了答案。

标签： javascript ios css ionic-framework

【解决方案1】：

我在类似的项目设置中遇到了类似的问题，其中 iOS 中的键盘与 ionic 中的页脚栏重叠。我能够通过删除ionic-plugin-keyboard@2.2.1 并添加cordova-plugin-ionic-keyboard@2.0.5 https://github.com/ionic-team/cordova-plugin-ionic-keyboard 来解决它

显然，当我将项目从 Ionic 1 升级到 2 时，我没有注意到 ionic-plugin-keyboard 已被弃用，我猜你可能处于类似的位置。

【讨论】：

新添加的插件是否立即解决了问题而没有使用任何肮脏的额外工作？
修复了我在 iOS 中隐藏底栏的问题。我唯一改变的是插件。
我会试着看看情况如何。如果一切正常，将接受您的回答。

【解决方案2】：

为了让事情发生，首先，您需要像下面的示例代码一样获取三个元素的高度。例如，

@ViewChild(Content) content: Content;

ionViewDidLoad() {
  if (this.platform.is('ios'))
    this.addKeyboardListeners();

  this.scrollContentElement = this.content.getScrollElement();
  this.footerElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('ion-footer')[0];
  this.inputElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('textarea')[0];
}

然后，为ios平台添加键盘监听器。

addKeyboardListeners() {
  this.keyboardHideSub = this.keyboard.onKeyboardHide().subscribe(() => {
    let marginBottom = this.textareaHeight - this.initialTextAreaHeight + 44;
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom + 'px');
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', '0px')
  });

  this.keybaordShowSub = this.keyboard.onKeyboardShow().subscribe((e) => {
    let newHeight = (e['keyboardHeight']) + this.textareaHeight - this.initialTextAreaHeight;
    let marginBottom = newHeight + 44 + 'px';
    this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom);
    this.renderer.setElementStyle(this.footerElement, 'marginBottom', e['keyboardHeight'] + 'px');
    this.updateScroll(250);
  });
}

最后，在您离开页面时取消订阅键盘监听器很重要。将其作为一种方法，并从您需要的任何地方调用它。

removeKeyboardListeners() {
  this.keyboardHideSub.unsubscribe();
  this.keybaordShowSub.unsubscribe();
}

【讨论】：

这些天我遇到了这个问题。我正在按照指南学习 Ionic + Meteor：angular-meteor.com/tutorials/whatsapp2/ionic/setup。其实英文键盘没有问题，切换到中文键盘时输入框被遮住了。看不懂你的方法，我觉得太复杂了，一定有什么简单的方法。
@sitexa 我同意你的看法。这不是最好的解决方案。我无法相信这个问题仍然没有解决的事实。我希望 Ionic 团队尽快提出一些更简洁的方法来解决 Ionic 开发人员面临的当前问题。

【解决方案3】：

@coderroggie 的解决方案救了我的命！

只需卸载 ionic-plugin-keyboard，然后安装 cordova-plugin-ionic-keyboard 即可。

就我而言，我有两个窗口： - 带有输入的 ion-footer 聊天列表：当输入具有焦点时，键盘会将所有内容向上推（包括导航栏）。

使用顶部搜索栏和自动完成列表进行搜索：当搜索栏获得焦点时，键盘会与列表重叠。

谢谢@coderroggie。

【讨论】：

【解决方案4】：

看起来这是与框架相关的问题。我在android中也面临同样的问题。为了解决这个问题，我使用了键盘插件，它的功能是处理视口的高度。下面是代码-

constructor(
    private platform: Platform,
    private keyboard: Keyboard
  ) {
    if(this.platform.is('android')){
      this.keyboard.onKeyboardShow().subscribe((e) => {
        var keyboardHeight = e.keyboardHeight;
        if ($("html").hasClass("plt-android")) {
          keyboardHeight = keyboardHeight ? keyboardHeight : '337';
          ****337 is default height to handle if keyboard height not available****
              $('body').css('height', 'calc(100vh - ' + keyboardHeight + 'px)' );
            }
          });

          this.keyboard.onKeyboardHide().subscribe(e => {
            $('input, textarea').blur();
            if ($("html").hasClass("plt-android")) {
                $("body").css("height", "100vh");
            }
          });
    }
}

图书馆--

npm install jquery
npm install @types/jquery
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install @ionic-native/keyboard

进口——

import { Platform } from '@ionic/angular';
import * as $ from "jquery";
import { Keyboard } from '@ionic-native/keyboard/ngx';

【讨论】：

【解决方案5】：

我变了

<ion-input type="tel" pattern="tel" autocomplete="tel (ionChange)="writeValue($event.target.value)"></ion-input>

到

<input type="tel" (change)="writeValue($event.target.value)" autocomplete="tel">

并添加了一些样式

 input {
    width: 100%;
    background-color: transparent;
    border: none;
    font-size: 17px;
    font-weight: 400;
  }
  input:focus {
    outline: none;
  }

【讨论】：

【解决方案6】：

终于，我们得到了完美的解决方案。

window.scrollBy(0, 100); // Scroll 100px downwards
window.scrollBy(100, 0); // Scroll 100px to the right

【讨论】：

你在哪里添加的