Ionic: keyboard overrides focused text input on iOS 11

Question

Question

When I press text input from modal, the keyboard overlaps text input. This issue was discovered during testing on the iPhone SE (iOS 11).

I looked through several threads and tried to figure it out on my own, but I realized that my current issue was a chronic issue for Ionic developers so far.

These are related links to my problem. I tried these solutions from the links below, but none of them worked with my code.

• Keyboard problem
• Keyboard overrides text input when input fits inside footer
• The keyboard hides the input until I start typing
• Ionic 2 On-screen keyboard Covers Focused input element inside the grid component

Version Information

cli packages: (/ usr / local / lib / node_modules)

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

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

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

System:

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

The ion input should remain in the position directly above the keyboard while the user enters some messages.

Actual behavior

app.component.ts

I turned it on keyboard.disableScroll(true);internally platform.ready()to prevent a navbar crash problem. Without this line of code, the keyboard works fine with input text. But it pushes all the content to the top, including the navigation bar, so that the first few messages appear hidden.

Any ideas?

UPDATED

I'm not sure that I solved the problem, this is the best solution, but at the moment I have replaced the bottom edge of the content and footer with the sum of the initial height of the text area and the height of the keyboard.

, .

.

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 !

-, c ordova-plugin-ionic-keyboard, .

: - : , ( ).

• . : .

@coderroggie.