Tengo una interfaz de chat simple, pero cuando enfoco el área de texto de entrada, el teclado empuja todo hacia arriba, incluido el encabezado. Además, los contenidos superiores del área de contenido están ocultos y no puedo desplazarme hacia ellos.
Esto es solo para iOS.
<ion-header></ion-header> <ion-content> Chat Title... Chat Messages... </ion-content> <ion-footer> <ion-card class="chat-input"> <textarea appAutoresize class="chat-input-textarea" rows="1" [(ngModel)]="input" placeholder="Ihre Nachricht"></textarea> </ion-card> </ion-footer>El problema parece ser causado por ionic-plugin-keyboard en desuso. Elimine ese complemento y use cordova-plugin-ionic-keyboard en su lugar.
Tenga en cuenta que @ionic-native/keyboard no parece funcionar actualmente con cordova-plugin-ionic-keyboard , por lo que es posible que desee utilizar estas soluciones si necesita acceder al complemento de teclado en el código (no necesita pensar para solucionar el problema en esta pregunta): https://github.com/ionic-team/ionic-native/issues/2306#issuecomment-369568584 https://github.com/ionic-team/ionic-native/ problemas/2306#issuecomentario-372593829
Tuve este problema en iPhoneX y después de probar algunas soluciones diferentes, descubrí que agregar un eventListener al archivo javaScript lo resolvió.
Asegúrese de tener instalado el ionic-plugin-keyboard en su proyecto
document.addEventListener('deviceready', function(e){ window.addEventListener('native.keyboardshow', function () { cordova.plugins.Keyboard.disableScroll(true); }); });después de una larga investigación y de leer que este problema aún está abierto en cordova/ionic, decidí resolver el problema por mi cuenta. La idea es adaptar la altura del encabezado mediante programación según la altura del teclado.
1.- En el encabezado de la plantilla de vista (HTML) adjunta una directiva de estilo:
<ion-header [ngStyle]="getKeyboardStyle()" >2.- Sobre el componente (TS) disparando los eventos del teclado (mostrar, ocultar) y el valor de la altura:
Observable.merge(this.nativeKeyboard.onKeyboardShow(), this.keyboard.didShow) .subscribe((e: any) => { this.keyboardHeight = e.keyboardHeight; }); Observable.merge(this.nativeKeyboard.onKeyboardHide(), this.keyboard.didHide) .subscribe((e: any) => { this.keyboardHeight = e.keyboardHeight | 0; }); }Donde this.keyboardHeight es un tipo de número de variable global. Y this.keybaord y this.nativeKeyboard son los complementos de cordova.
3.- Finalmente, este es el método que devuelve la altura adjunta a la directiva ngStyle del encabezado:
getKeyboardStyle() { let style = { 'top': this.keyboardHeight ? this.keyboardHeight + 'px' : '0px' } return style;Espero que esto pueda ayudar.