在Android中，如设置沉浸式，键盘弹出便就将输入框内容挡住，很不友好，下面附上我自己的解决思路，键盘弹出的时候，给ion-content设置键盘的高度paddingBottom, 然后使ion-content组件滚动到对应的输入框位置：
建立一个指令组件，以指令的方式在输入框中使用
import {Platform } from '@ionic/angular';@Directive({selector: '[appKeyboardOverlay]'})export class KeyboardOverlayDirective implements OnInit, OnDestroy {@Input() appKeyboardOverlay: any; // 接收Ioncontent的模板变量offsetTop: number = 0;keyBoardShow: any;keyBoardHide: any;constructor(private platform: Platform,) {}ngOnInit() {}ngOnDestroy() {if (this.platform.is('android')) {window.removeEventListener('keyboardDidShow', this.keyBoardShow, false);window.removeEventListener('keyboardDidHide', this.keyBoardHide, false);}}@HostListener('ionFocus', ['$event']) async keyboardShow(event: any) {this.offsetTop = 0;const offsetTop = await this.getOffsetTop(event.target);console.log(offsetTop);if (this.platform.is('android')) {!this.keyBoardShow && (window.removeEventListener('keyboardDidShow', this.keyBoardShow, false));!this.keyBoardHide && (window.removeEventListener('keyboardDidHide', this.keyBoardHide, false));this.keyBoardShow = function (e: any) {this.appKeyboardOverlay.el.style.cssText += `--keyboard-offset: ${e.keyboardHeight}px`;this.appKeyboardOverlay.scrollToPoint(0, offsetTop);}.bind(this);this.keyBoardHide = function () {this.appKeyboardOverlay.el.style.cssText += '--keyboard-offset: 0';}.bind(this);window.addEventListener('keyboardDidShow', this.keyBoardShow, false);window.addEventListener('keyboardDidHide', this.keyBoardHide, false);}}@HostListener('ionBlur', ['$event.target']) keyboardHide(event: any) {if (this.platform.is('android')) {window.removeEventListener('keyboardDidShow', this.keyBoardShow, false);window.removeEventListener('keyboardDidHide', this.keyBoardHide, false);}}async getOffsetTop(el: any) {if (el.nodeName !== 'ION-CONTENT') {this.offsetTop += el.offsetTop;return this.getOffsetTop(el.offsetParent);} else {return this.offsetTop;}}}
在页面中引入该指令的module,并在页面ion-input组件中使用该指令
...import {KeyboardOverlayModule } from './../../../../directives/keyboard-overlay/keyboard-overlay.module';@NgModule({imports: [CommonModule,FormsModule,IonicModule,MediaUploadModule,HeaderPaddingModule,KeyboardOverlayModule,],declarations: [GoodsListEditPage]})export class GoodsListEditPageModule {}
page页面中使用：<ion-content #content><ion-list class="ion-margin-bottom" lines="none" mode="ios"><ion-item lines="none"><ion-label position="stacked">商品名称:</ion-label><ion-textarea autoGrow rows="1" maxlength="100" [appKeyboardOverlay]="content"></ion-textarea></ion-item></ion-list></ion-content>
如有疑问，请留言，我会及时回复
