Question

问题

当我单击模态中的文本输入时，键盘与文本输入重叠。在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()以防止导航栏崩溃问题。没有这行代码，键盘可以正常输入文本。但它将整个内容推送到顶部，包括导航栏，因此前几条消息似乎被隐藏了。

有什么想法吗？

已更新

我不确定我解决问题的方法是最好的解决方案，但是现在，我用文本区域的初始高度和键盘高度的总和替换了内容和页脚的边距底部。 / p>

如果您有更好的解决方案，请随时留下答案。

这是最终结果。

Answer 1

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

就能解决问题

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

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

Answer 3

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

只需卸载 ionic-plugin-keyboard ，然后安装c ordova-plugin-ionic-keyboard 即可使用。

在我的情况下，我有两个窗口： - 具有输入的离子页脚的聊天列表：当输入具有焦点时，键盘将所有内容推送（包括导航栏）。

使用热门搜索栏和自动填充进行搜索列表：当搜索栏具有焦点时，键盘与列表重叠。

谢谢@coderroggie。

Answer 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';

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

Answer 6

最后，我们得到了完美的解决方案。

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

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

6 个答案: