Ionique dans les 2, comment faire flotter un élément au-dessus du clavier lorsque le clavier montre?

J'ai également nécessaires pour mettre en œuvre cette. Je l'ai fait et ça fonctionne parfaitement.

1er vous devez utiliser des plugins cordova clavier, et au début d'appel
cordova.plugins.Keyboard.disableScroll(true); de sorte que le clavier ne sera pas pousser votre vue.
2e vous avez besoin d'écouter sur keyboardshow et le clavier de masquer des événements comme cela avec les 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);
    }

Que vous pouvez faire une observables de l'événement comme celui-ci:

this.keyboardObservable = Observable.fromEvent(document, 'keyboardShown');

Que vous pouvez écouter cette observable. Si le clavier est ouvert que vous modifiez la hauteur du conteneur où vos messages sont affichés. En gros, vous avez à faire baisser la hauteur du clavier. Voici comment je l'ai fait

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 + '%';
                }

            });

et la modification de ces propriétés avec ngStyle comme ce

[ngStyle]="{'height': sectionHeight}"

J'ai aussi besoin de cela pour chatapp, et maintenant ça fonctionne parfaitement (même si vous faites pivoter l'écran en portrait ou en mode paysage), l'entrée flotte toujours au-dessus du clavier, tout comme dans les applications natives 🙂

J'espère que cela va vous aider!

J'ai eu ce problème avec Android, j'ai donc créé une méthode de service que je pourrais mettre en composants individuels. Il est basé sur l'utilisation <ion-input> champs à l'intérieur d'un <ion-content> tag.

Cela prend avantage de la setScrollTop méthode qui a été ajouté à la Content classe.

Service

export class KeyboardService {
autoKeyboardScroll(content:Content, scrollBackAfterKeyboardClose?:boolean) {
if (!content) {
return;
}
var previousScrollTop = null;
function onKeyboardShow(e) {
//if the content no longer exists, stop the listener
if (removeListenersForMissingContent()) {
return;
}
previousScrollTop = content.getScrollTop();
//find the input that's currently in focus
var focusedElement = document.activeElement;
if (focusedElement && ['INPUT', 'TEXTAREA'].indexOf(focusedElement.tagName)!==-1) {
//determine the total offset between the top of the "ion-content" and this element.
//we will do this by climbing up the dom until we reach the "ion-content"
var offsetTop = focusedElement.offsetTop + focusedElement.scrollHeight;
var parentEl = focusedElement.offsetParent;
while (parentEl && parentEl.tagName!=='ION-CONTENT') {
offsetTop += parentEl.offsetTop;
parentEl = parentEl.offsetParent;
}
//we want to move the input so that the bottom of the focused input is just above the keyboard
var contentDimensions = content.getContentDimensions();
var newScrollTop = offsetTop - (contentDimensions.contentHeight - focusedElement.scrollHeight);
content.setScrollTop(newScrollTop);
}
}
function onKeyboardHide(e) {
//if the content no longer exists, stop the listener
if (removeListenersForMissingContent()) {
return;
}
//set the scroll top back to the initial position, if requested
if (scrollBackAfterKeyboardClose) {
content.setScrollTop(previousScrollTop);
}
}
function removeListenersForMissingContent() {
//if there is no content, remove the keyboard listeners
if (!content || content.getContentDimensions().contentHeight===0) {
window.removeEventListener('native.keyboardshow', onKeyboardShow);
window.removeEventListener('native.keyboardhide', onKeyboardHide);
return true;
}
}
//setup listeners
window.addEventListener('native.keyboardshow', onKeyboardShow);
window.addEventListener('native.keyboardhide', onKeyboardHide);
}
}

Composant

@Component({
template: `<ion-content>
<ion-list>
<ion-item>
<div style="height: 400px"></div>
</ion-item>
<ion-item>
<ion-label>Field 1</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Field 2</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Field 3</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Field 4</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Field 5</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label>Field 6</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-list>
</ion-content>`
})
export class MyPage {
@ViewChild(Content) content: Content;
constructor(private: keyboardService: KeyboardService) {}
//add the keyboard scroll action to this page. this is added after the view has been created,
//so the content element will be avaialble.
ionViewDidEnter() {
//timeout seems to be required, to ensure that the content child is available
setTimeout(() => {
//set the keyboard to auto-scroll to the focused input, when it opens
this.keyboardService.autoKeyboardScroll(this.content);
});
}
}