首页 文章

离子：键盘与iOS 11上的焦点文本输入重叠

提问于
浏览 次
6

Issue

当我单击模态中的文本输入时，键盘与文本输入重叠 . 在iPhone SE（iOS 11）设备上进行测试时发现此问题 .

我查了几个帖子并试图自己弄清楚，但我已经意识到我目前的问题一直是Ionic开发人员的长期问题，直到现在 .

These are the related links to my issue. 我尝试过以下链接给出的解决方案，但没有一个能与我的代码配合使用 .

Version Info

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

Expected behavior

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

Actual behavior

enter image description here

app.component.ts

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

有任何想法吗？

UPDATED

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

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

这是最终的结果 .

enter image description here

javascript ios css ionic-framework

3 回答

  • 7

    我在类似的项目设置中遇到类似的问题，其中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，我猜你可能处于类似的位置 .

    回复于
  • 1

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

    @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();
}
    回复于
  • 1

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

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

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

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

    谢谢@coderroggie .

    回复于

相关问题