I've also needed to implement this. I did it and it works perfectly.
1st you need to use cordova plugins keyboard, and at the start call
cordova.plugins.Keyboard.disableScroll(true);
so the keyboard will not push your view up.
2nd you need to listen on keyboardshow and keyboard hide events like this with a the handlers:
cordova.plugins.Keyboard.disableScroll(true);
window.addEventListener('native.keyboardshow', this.dispatchMe);
window.addEventListener('native.keyboardhide', this.dispatchMeHide);
dispatchMe(e) {
var event = new CustomEvent('keyboardShown');
event['keyboardHeight'] = e.keyboardHeight;
document.dispatchEvent(event);
}
dispatchMeHide() {
var event = new CustomEvent('keyboardShown');
event['closed'] = true;
document.dispatchEvent(event);
}
Than you can make an observable from event like this:
this.keyboardObservable = Observable.fromEvent(document, 'keyboardShown');
Than you can listen to that observable. If the keyboard is open than you change the height of the container where your messages are shown. You basically have to make it lower for the height of the keyboard. Here is how I did that
this.chatService.keyboardObservable
.subscribe(data => {
if (data.closed) {
this.sectionHeight = 85 + '%';
this.inputBottom = 0 + '%';
}
else {
this.docHeight = document.body.clientHeight;
this.sectionHeight = ((this.docHeight - data.keyboardHeight - (document.getElementById('toptoolbar').clientHeight + document.getElementById('inputchat').clientHeight)) / this.docHeight) * 100 + '%';
this.inputBottom = data.keyboardHeight / this.docHeight * 100 + '%';
}
});
and you change these properties with ngStyle like this
[ngStyle]="{'height': sectionHeight}"
I also needed this for chatapp, and now it works perfectly (even if you rotate the screen portrait/landscape mode), the input always floats above the keyboard just like in the native apps :)
I hope this will help you!